使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，而仅将content直接放在外部container div中。