让 flexbox 容器覆盖内容高度？ [复制]

Question

我正在尝试使用 Flexbox 来获得一个布局，其中顶部有一个栏，页面其余部分有内容。测试用例位于：

http://game-point.net/misc/flextest/

有趣的是，谷歌浏览器已经按照我想要的方式运行了；当视口在垂直方向上太小（所有浏览器似乎都在水平方向做我想要的），content div 中的内容会溢出 div，Chrome 会为内容显示一个垂直滚动条。但是在 Edge 和 Firefox 中，当视口在垂直方向上太小时，content div 本身的大小永远不会垂直小于其文本内容，因此它会溢出视口，导致整个视口获得垂直滚动条而不是不仅仅是content div。区别如下：

Chrome：

不是 Chrome：

哪些浏览器正确实现了 flexbox，如何让 Firefox 和 Edge 像 Chrome 一样只滚动内容框，而不是整个视口？

Answer 1

如果它不违背您项目中的其他理想，您可以修复容器的高度，以便可滚动区域正确呈现。

div.header {
  height: 72px;
}

div.content-container {
  height: calc(100% - 72px);
}

Answer 2

原来我需要删除 content-container 并直接在外部 container div 中添加 content。