Html 如何强制div在特定大小后滚动？

小提琴

这把小提琴清楚地解释了这个问题：（编辑：修复了破损的小提琴。）

问题

我有一个容器div，其中有3个div。
顶部分区和中间分区在高度上是动态的。底部div是固定的。
一旦中间的div足够扩展，我希望它可以滚动

代码片段

基本结构：

<div id='container'>
    <div id='top'>Top (dynamic) content</div>
    <div id='middle'>Middle (dynamic) content</div>
    <div id='bottom'>Bottom (fixed) content</div>
</div>

问题

---

有没有一种方法可以只用CSS来实现这一点？（仅指CSS，我的意思是没有JavaScript。）

是的，在#容器上设置一个最大高度。您可能还需要修改溢出属性。首先将其设置为滚动。

您可以这样做

#middle {
   overflow-y: auto; /* does nothing */
height: calc(100% - 100px);
}

---

以下是使用FlexBox进行布局的方法：

将父

#container

元素的

显示设置为
flex
。由于希望元素垂直堆叠，请将
弹性方向
属性的值设置为
列
。和
justify content:interval
用于在中间元素的高度降低时将最后一个元素放置在底部

值得指出的是，
vh
单位用于将父元素的高度设置为

我还将middles元素的
flex-shrink
属性设置为一个相对任意的数字，以使其收缩。然后使用
flex-basis:100%
强制元素填充剩余空间

#middle {
    overflow-y: auto;
    flex-shrink: 50;
    flex-basis: 100%;
}

如果我知道它的最大高度，我就能做到。因为上面的div也是动态的，我无从知道。那太美了！非常感谢。
#container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#middle {
    overflow-y: auto;
    flex-shrink: 50;
    flex-basis: 100%;
}