- 首页
- 前端开发
- firefox 溢出-y 不适用于嵌套的 flexbox
firefox 溢出-y 不适用于嵌套的 flexbox
[英] firefox overflow-y not working with nested flexbox
本文介绍了firefox 溢出-y 不适用于嵌套的 flexbox的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我用 css3 flexbox 设计了一个 100% 宽 100% 高的布局,它可以在 IE11 上运行(如果 IE11 的模拟是正确的,也可能在 IE10 上运行).
但是 Firefox (35.0.1),overflow-y 不起作用.正如您在此代码笔中看到的:http://codepen.io/anon/pen/NPYVga
firefox 没有正确渲染溢出.它显示一个滚动条
html,身体 {高度:100%;边距:0;填充:0;边框:0;}.level-0-容器{高度:100%;显示:-webkit-box;显示:-webkit-flex;显示:-ms-flexbox;显示:弹性;-webkit-box-orient:垂直;-webkit-box-direction:正常;-webkit-flex-direction: 列;-ms-flex-direction: 列;弹性方向:列;}.level-0-row1 {边框:1px纯黑色;box-sizing: 边框框;}.level-0-row2 {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;弹性:1;边框:1px纯黑色;box-sizing: 边框框;显示:-webkit-box;显示:-webkit-flex;显示:-ms-flexbox;显示:弹性;-webkit-box-orient:水平;-webkit-box-direction:正常;-webkit-flex-direction: 行;-ms-flex-direction:行;弹性方向:行;}.level-1-col1 {宽度:20em;溢出-y:自动;}.level-1-col2 {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;弹性:1;边框:4px纯蓝色;box-sizing: 边框框;显示:-webkit-box;显示:-webkit-flex;显示:-ms-flexbox;显示:弹性;-webkit-box-orient:垂直;-webkit-box-direction:正常;-webkit-flex-direction: 列;-ms-flex-direction: 列;弹性方向:列;}.level-2-row2 {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;弹性:1;边框:4px纯红色;box-sizing: 边框框;溢出-y:自动;}
<身体><div class="level-0-container"><div class="level-0-row1">标题文本
<div class="level-0-row2"><div class="level-1-col1">线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>线 <br/>
<div class="level-1-col2"><div class="level-2-row1">一些文字<p/>一些文字 2<p/>一些文字 3<p/>
<div class="level-2-row2"><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些测试</p>
</html>
解决方案
tl;dr: you need min-height:0
in your .level-0-row2
规则.(这是带有该修复程序的代码笔.)
更详细的解释:
Flex 项目根据其子项的固有大小(不考虑其子项/后代的溢出"属性)建立默认的最小大小.
每当你有一个带有 overflow: [hidden|scroll|auto]
inside 的元素,你需要给它的祖先 flex item min-width:0
(在水平 flex 容器中)或 min-height:0
(在垂直 flex 容器中),禁用这种最小尺寸行为,否则 flex项目将拒绝缩小到小于孩子的最小内容大小.
参见 https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 了解更多受此影响的网站示例.(请注意,这只是一个元错误,用于跟踪被此类问题破坏的网站,在实施此规范文本后 - 它实际上不是 Firefox 中的错误.)
你不会在 Chrome 中看到这个(至少,在这篇文章中不是),因为它们 还没有实现这个最小尺寸行为.(Chrome 现在已经实现了这个最小尺寸行为,但他们可能仍然在某些情况下错误地将最小尺寸折叠为 0.)
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).
But Firefox (35.0.1), overflow-y is not working. As you can see in this codepen :
http://codepen.io/anon/pen/NPYVga
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: you need min-height:0
in your .level-0-row2
rule. (Here's a codepen with that fix.)
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).
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.
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.)
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.)
这篇关于firefox 溢出-y 不适用于嵌套的 flexbox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文