css - 你能让一个 flexbox child 扩展以适应 parent 而不是内容吗？

Question

我正在使用 flexbox 使 div 占据浏览器窗口中剩余的垂直空间，但我想防止它超出该空间。当它的内容超过其垂直大小时，我希望在现在太小的 flexbox 子项中显示一个滚动条。

这可能吗？还是我应该为此使用其他一些布局技术？

这是一个指向 JSFiddle 的链接以显示情况:https://jsfiddle.net/83990d3a/

另一个垂直空间被工具栏占用，其确切的垂直尺寸事先是未知的。

Answer 1

只需将 overflow: auto 添加到 #content ( updated fiddle ):

#content {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}