html - 制作一个 div 滚动而不是扩展以适合其内容

Question

我有一个布局，中间有一个可滚动的元素列表，上面和下面的一些东西在一列中。该列表应占用列中可用的尽可能多的空白空间(我不想在其上指定特定高度)，并且当列中的空白空间不足以容纳所有元素时应滚动.

Here是一个 JSFiddle 的情况。

请注意，滚动条 中只有几个 item，它会扩展以填充 列 中的空白空间(正如预期的那样).但是，如果您向 scroller 添加更多的 item，它会扩展以适应其全部内容，而不是保持其原始大小，然后滚动其溢出的内容;即使它设置了 overflow-y: scroll!

---

但是，如果您随后将 scroller 设置为 height 为 0，问题就解决了，元素会按预期滚动，在添加额外项之前，滚动条 处于其原始高度。

但是为什么!？有人可以向我解释这里发生了什么吗？另外，这个“解决方案”是否有任何我没有看到的后果？

---

<div class="column">
  <div class="title">Header</div>
  <div class="scroller">
    <div class="item">Child</div>
    <div class="item">Child</div>
  </div>
  <div class="title">Footer</div>
</div>

,

.column {
  display: flex;
  flex-direction: column;
  height: 200px;
}

.title {
  height: 50px;
  flex-shrink: 0;
}

.scroller {
  flex-grow: 20;
  flex-shrink: 0;
  overflow-y: scroll;
}

.item {
  height: 20px;
  margin-top: 2px;
}

Answer 1

为以后遇到此问题的任何人提供一些快速背景知识:

具有 flex-grow 的元素展开以占用 x 个单位的可用空间减去其他 flex 内容。在您的情况下，.scroller 是唯一具有 flex-grow 的元素，但其他 flex 元素已定义高度，因此它们的内容会占用空间。

具有 flex-shrink 的元素随着空间的减少而收缩。零值意味着它们不收缩，值 >=1 允许缩小。

然而，flex-shrink 只有在元素没有应用 flex-grow 时才有效。 同时收缩和增长的元素只会收缩到其内容的大小

在您的示例中，当元素与内容(见上文)一样大时，溢出不会启动，因为您同时应用了增长/收缩。添加显式高度 (height: 0) 会覆盖计算出的“内容”高度，从而允许 flex-shrink 将元素压缩为小于其内容。这反过来又使滚动条起作用。

我不知道这是否会在某些时候引起任何奇怪的情况，但这是一个有趣的问题解决方案，而且看起来效果很好。