Question

我有一个布局，其中的中心有一个可滚动的项目列表，列中有一些东西在其上方和下方。列表应占用列中可用的尽可能多的空白空间（我不想在其上指定特定高度），并且应在列中的空白空间不足以容纳所有项目时滚动

Here是这种情况的JSFiddle。

请注意，item中只有几个scroller，它会扩展以填充column中的空白空间（按预期）。但是，如果您在item上再添加几个scroller，它会扩展为适合其全部内容，而不是保持其原始大小，然后滚动其溢出的内容；即使已设置overflow-y: scroll！

但是，如果您随后将scroller设置为height的{{1}}，则问题已解决，并且项目按预期滚动，0位于添加额外项目之前的原始高度。

但是为什么！？有人可以告诉我这是怎么回事吗？另外，我没有看到这种“解决方案”的后果吗？

scroller

，

<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>

Answer 1

稍后会涉及到此内容的人的一些快速背景知识：

具有Optional.empty()的元素将扩展为占用x单位的可用空间减去其他flex内容。在您的情况下，flex-grow是唯一具有flex-grow的元素，但是其他flex元素具有定义的高度，因此它们的内容会占用空间。

随着空间减少，具有.scroller收缩的元素。零值表示它们不收缩，值> = 1允许缩小。

但是，flex-shrink仅在元素也没有应用flex-shrink的情况下起作用。 同时缩小和增长的元素只会缩小到其内容的大小

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

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

Answer 2

您需要为滚动容器css添加高度：

height: 30px;

或最大高度以允许增长到极限：

max-height: 30px;

无论哪种方式，要使滚动滚动，容器都需要受到约束，所以也许：

height: 100%;

然后限制其容器的大小。

Answer 3

我可以通过将滚动器元素上的flex-shrink设置为1来使其工作。它将在其可用空间处显示上限，并使用滚动条。

使div滚动而不是扩展以适合其内容

3 个答案: