Html 制作一个div滚动条，而不是展开以适应其内容

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

只是情况的一部分

请注意，

滚动条中只有几个
项
，它将展开以填充
列
中的空白（如预期的那样）。但是，如果您在
滚动条
中添加多个
项
，它将扩展以适应其全部内容，而不是保持其原始大小，然后滚动其溢出的内容；即使设置了
overflow-y:scroll
set


但是，如果随后将
滚动条
设置为
高度
为
0
，则问题已得到解决，项目按预期滚动，在添加额外项目之前，
滚动条
处于其原始高度

但是为什么！？有人能给我解释一下这是怎么回事吗？还有，这个“解决方案”是否有我没有看到的后果


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

height: 30px;

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

max-height: 30px;

无论是哪种方式，为了使滚动生效，容器需要感觉受到约束，因此可能：

height: 100%;

然后限制其容器的大小
 我可以通过将滚动条元素上的
flex-shrink
设置为
1
来实现这一点。它将在其可用空间内使用滚动条进行封顶。
为以后遇到此问题的任何人提供一些快速背景：

具有
flex的元素将增长
以占用x个单位的可用空间减去其他flex内容。在您的例子中，
.scroller
是唯一一个使用flex grow的元素，但是其他flex元素已经定义了高度，所以它们的内容占用了空间

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

但是，
flex-shrink
仅在元素未应用
flex-grow
时才起作用同时具有收缩和增长功能的元素只会收缩到其内容的大小

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

我不知道这是否会在某一点上引起任何奇怪的事情，但这是一个有趣的解决问题的方法，而且似乎效果很好
 嗨，马特，谢谢你的快速回复！我应该在问题中这样说，但我的目标是不在
.scroller
上指定高度。我只想让它占据任何可用的垂直空间。然而，任何小于其“自然”高度的高度（包括
30px
）都具有与
0
相同的效果。但是我还是不明白为什么会这样。你需要对滚动条容器进行一些约束。我在答案中添加了更多选项。
max-height: 30px;

height: 100%;