CSS firefox 溢出-y 不适用于嵌套的 flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28636832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
firefox overflow-y not working with nested flexbox
提问by rekna
I have designed a 100% width 100% height layout with css3 flexbox, which works both on IE11 (and probably on IE10 if emulation of IE11 is correct).
我用 css3 flexbox 设计了一个 100% 宽 100% 高的布局，它可以在 IE11 上工作（如果 IE11 的模拟是正确的，也可能在 IE10 上）。
But Firefox (35.0.1), overflow-y is not working. As you can see in this codepen : http://codepen.io/anon/pen/NPYVga
但是 Firefox (35.0.1)，overflow-y 不起作用。正如您在此代码笔中看到的：http://codepen.io/anon/pen/NPYVga
firefox is not rendering overflow correctly. It shows one scrollbar
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>回答by dholbert
tl;dr: you need min-height:0in your .level-0-row2rule. (Here's a codepen with that fix.)
tl;dr：你需要min-height:0在你的.level-0-row2规则中。（这是一个带有该修复程序的代码笔。）
More detailed explanation:
更详细的解释：
Flex items establish a default minimum size that's based on their children's intrinsic size (which doesn't consider "overflow" properties on their children/descendants).
Flex 项目根据其子项的固有大小（不考虑其子项/后代的“溢出”属性）建立默认的最小大小。
Whenever you've got an element with overflow: [hidden|scroll|auto]insideof a flex item, you need to give its ancestor flex item min-width:0(in a horizontal flex container) or min-height:0(in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child's min-content size.
每当你有一个包含overflow: [hidden|scroll|auto]在flex 项目内部的元素时，你需要给它的祖先 flex 项目min-width:0（在水平 flex 容器中）或min-height:0（在垂直 flex 容器中），以禁用这种最小尺寸行为，否则 flex项目将拒绝缩小小于孩子的最小内容大小。
See https://bugzilla.mozilla.org/show_bug.cgi?id=1043520for more examples of sites that have been bitten by this. (Note that this is just a metabug to track sites that were broken by this sort of issue, after this spec-text was implemented -- it's not actually a bug in Firefox.)
请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1043520，了解更多被此攻击的网站示例。（请注意，在实施此规范文本后，这只是一个用于跟踪因此类问题而损坏的站点的元错误 - 它实际上不是 Firefox 中的错误。）
You won't see this in Chrome (at least, not as of this posting) because they haven't implemented this minimum sizing behavior yet.(EDIT: Chrome has now implemented this min-sizing behavior, but they may still incorrectly collapse min-sizes to 0 in some cases.)
你不会在 Chrome 中看到这个（至少，在这篇文章中没有），因为他们还没有实现这个最小大小调整行为。（编辑：Chrome 现在已经实现了这种最小尺寸行为，但在某些情况下，它们仍可能错误地将最小尺寸折叠为 0。）
