我用 css3 flexbox 设计了一个 100% 宽 100% 高的布局，它可以在 IE11 上运行(如果 IE11 的模拟是正确的，也可能在 IE10 上运行)。
但是 Firefox (35.0.1), overflow-y 不工作。正如您在此代码笔中所见: http://codepen.io/anon/pen/NPYVga
firefox 没有正确渲染溢出。它显示一个滚动条
html,
body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
.level-0-container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.level-0-row1 {
border: 1px solid black;
box-sizing: border-box;
}
.level-0-row2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid black;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.level-1-col1 {
width: 20em;
overflow-y: auto;
}
.level-1-col2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 4px solid blue;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.level-2-row2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 4px solid red;
box-sizing: border-box;
overflow-y: auto;
}<html>
<body>
<div class="level-0-container">
<div class="level-0-row1">
Header text
</div>
<div class="level-0-row2">
<div class="level-1-col1">
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
</div>
<div class="level-1-col2">
<div class="level-2-row1">
Some text
<p/> Some text 2
<p/> Some text 3
<p/>
</div>
<div class="level-2-row2">
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some test</p>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
tl;dr:您的 .level-0-row2 规则中需要 min-height:0。 ( Here's a codepen with that fix .)
更详细的解释:
Flex 元素根据其子项的固有大小(不考虑其子项/后代的“溢出”属性)建立默认的最小大小。
每当你有一个带有 overflow: [hidden|scroll|auto] inside 的元素时，你需要给它的祖先 flex item min-width:0(在水平 flex 容器中)或 min-height:0(在垂直 flex 容器中)，以禁用此最小尺寸行为，否则 flex元素将拒绝缩小小于 child 的最小内容大小。
参见 https://bugzilla.mozilla.org/show_bug.cgi?id=1043520有关被此攻击的网站的更多示例。 (请注意，这只是一个元错误，用于跟踪因此类问题而损坏的站点，在实现此规范文本之后——它实际上并不是 Firefox 中的错误。)
你不会在 Chrome 中看到这个(至少，在这篇文章中不会)因为它们 haven't implemented this minimum sizing behavior yet .(编辑:Chrome 现在已经实现了这种最小尺寸行为，但它们仍然可能是 incorrectly collapse min-sizes to 0 in some cases。)
关于css - firefox overflow-y 不适用于嵌套的 flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28636832/