我设计了100％宽度的100％高度布局与css3 flexBox，它在IE11上工作(如果IE11的仿真正确，可能在IE10上)。
但Firefox(35.0.1)，overflow-y不工作。正如你可以在这个codepen看到的：
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项目建立一个默认的最小尺寸，它基于孩子的内在大小(不考虑孩子/后代的“溢出”属性)。
每当你有一个浮动元素：[hidden | scroll | auto]在一个flex项目中，你需要给它的祖先flex项目min-width：0(在一个水平的flex容器)或min-height：0(在垂直的flex容器中)，要禁用此最小化大小的行为，否则flex项目将拒绝缩小比小孩的最小内容大小小。
参见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.)
