Flexbox：当下面的元素隐藏时，为什么不显示整个 div？

Question

我需要一个灵活的列，其中几个小部件彼此下方放置，并且它们应该动态占据 space。小部件有一个标题和一个可滚动的内容。最后一个小部件应该是可折叠的（通过单击小部件标题）。

问题是：当我折叠小部件时，部分标题被隐藏了。

看这里（点“批量运行”看问题）： http://jsfiddle.net/stoefln/Ls0aqnvf/8/

$('.batchRunsTitle').on('click', function() {
  $('.batchRuns').toggle()
})

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" style="height: calc(100% - 80px); background: #AAA; display: flex; flex-direction: column; ">
  <div class="batchView" style="flex-grow: 1; display: flex; flex-direction: column; border: 1px solid #F00; overflow: hidden;">
    <div class="header" style="">widget title 1</div>
    <div class="tests" style="flex-basis: 70%; border: 1px solid #F0F; overflow: auto;">test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/></div>
    <div>
      widget title 2
    </div>
    <div class="ehs" style="flex-basis: 30%; border: 1px solid #00F; overflow: auto;">test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/></div>
  </div>
  <div class="batchRunsContainer" style="flex-grow: 1; display: flex; flex-direction: column; overflow: auto">
    <div class="batchRunsTitle" style="cursor: pointer; background-color: #6c2; border: 10px solid #55F; ">
      widget title 3
    </div>
    <!-- why is the "Batch runs" title only half visible when the next block gets hidden??? -->
    <div class="batchRuns" style="overflow: auto; display: block;">
      test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>
    </div>
  </div>
</div>

<div class="log" style="height: 80px; background-color: #EEAEEE66; position: absolute; bottom: 0; right: 0; left: 0;">
  Log
</div>

也可以参考这里的 2 个状态作为屏幕截图：

打开：

已折叠：

Answer 1

由于 batchRunsContainer 上的 overflow: auto，它似乎被删减了。解决此问题的一种方法是将 batchRunsTitle div 放在 batchRunsContainer 之外。这是一个工作演示（查看整页）：

const title = document.querySelector('.batchRunsTitle')
const content = document.querySelector('.batchRuns')
title.addEventListener('click', () => {
  if (content.style.display !== 'none') {
    content.style.display = 'none'
  } else {
    content.style.display = ''
  }
})

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

<div class="column" style="height: calc(100% - 80px); background: #AAA; display: flex; flex-direction: column; ">

  <div class="batchView" style="flex-grow: 1; display: flex; flex-direction: column; border: 1px solid #F00; overflow: hidden;">
    <div class="header" style="">widget title 1</div>
    <div class="tests" style="flex-basis: 70%; border: 1px solid #F0F; overflow: auto;">test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/></div>
    <div>
      widget title 2
    </div>
    <div class="ehs" style="flex-basis: 30%; border: 1px solid #00F; overflow: auto;">test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/></div>
  </div>

  <div class="batchRunsTitle" style="cursor: pointer; background-color: #6c2; border: 10px solid #55F; ">
    widget title 3
  </div>
  
  <div class="batchRunsContainer" style="flex-grow: 1; display: flex; flex-direction: column; overflow: auto">
    <div class="batchRuns" style="overflow: auto; display: block;">
      test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>
    </div>
  </div>
</div>

<div class="log" style="height: 80px; background-color: #EEAEEE66; position: absolute; bottom: 0; right: 0; left: 0;">
  Log
</div>

Flexbox：当下面的元素隐藏时，为什么不显示整个 div？

Flexbox: Why isn't whole div shown when element below becomes hidden?

css

flexbox