javascript - 让 flexbox 容器覆盖内容高度？

Question

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

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

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

铬合金：

不是铬：

这些浏览器中的哪一个正确实现了 flexbox，我怎样才能让 Firefox 和 Edge 像 Chrome 那样只滚动内容框，而不是整个视口？

标签： javascripthtmlcssgoogle-chromeflexbox

Answer 1

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