firefox overflow-y不能与嵌套的flexbox一起使用 [英] firefox overflow-y not working with nested flexbox
问题描述
我设计了一个100％宽度的100％高度布局与css3 flexbox，它可以工作在IE11（如果IE11的仿真可能在IE10）。
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).
但是Firefox（35.0.1），overflow-y不工作。您可以在此代码中看到：
http://codepen.io/anon/pen/NPYVga
But Firefox (35.0.1), overflow-y is not working. As you can see in this codepen : http://codepen.io/anon/pen/NPYVga
firefox无法正确呈现。它显示一个滚动条
firefox is not rendering overflow correctly. It shows one scrollbar
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：你需要 min-height：0 在 .level-0-row2 规则。 （这是一个有此修复的代码。）
tl;dr: you need min-height:0 in your .level-0-row2 rule. (Here's a codepen with that fix.)
更详细的说明：
Flex项目建立的默认最小尺寸是根据子女的内在大小
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).
每当你有一个元素 overflow：[hidden | scroll | auto] / code> 在flex项目中，您需要给它的祖先flex项 min-width：0 容器）或 min-height：0 （在垂直flex容器中），以禁用此最小化行为，否则flex项将拒绝缩小为小于子
Whenever you've got an element with overflow: [hidden|scroll|auto] inside of 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.
查看 https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 了解更多遭到此网站封杀的网站示例。 （请注意，这只是一个配置文件来跟踪被这种问题破坏的网站，在此规范实施后 - 它实际上不是Firefox中的错误。）
See https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 for 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.)
您不会在Chrome中看到这个（至少，不是这篇文章），因为他们尚未实施此最小大小调整行为。（编辑：Chrome现在已实施此最小调整行为，但它们可能仍在某些情况下将最小尺寸不正确地折叠为0.）
You won't see this in Chrome (at least, not as of this posting) because they haven't implemented this minimum sizing behavior yet. ( Chrome has now implemented this min-sizing behavior, but they may still incorrectly collapse min-sizes to 0 in some cases.)
这篇关于firefox overflow-y不能与嵌套的flexbox一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
