Firefox的溢出 – 不适用于嵌套的Flexbox

我用css3 flexboxdevise了100%宽度的100%高度布局,它可以在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 。 ( 这是一个解决scheme的代码 。)

更详细的解释:

Flex项目build立了一个默认的最小尺寸,这个尺寸是基于他们孩子的内在尺寸的(不考虑孩子/后代的“溢出”属性)。

无论何时Flex元素中有overflow: [hidden|scroll|auto]元素,都需要给它的祖先flex项min-width:0 (在水平柔性容器中)或min-height:0 (在一个垂直柔性容器中),禁用这个最小尺寸的行为,否则flex项目将拒绝缩小比孩子的最小内容尺寸更小的尺寸。

请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1043520了解更多已被此叮咬的网站示例。; (请注意,这只是一个用于追踪被这种问题破坏的网站的代理,在实现这个规范文本之后 – 它实际上并不是Firefox中的一个错误。)

在Chrome中你不会看到这个(至less不是这个post),因为他们还没有实现这个最小尺寸的行为 。 (编辑:Chrome现在已经实现了这个最小化的行为,但是在某些情况下 ,他们仍然可能会错误地将min-sizes折成0 。

简单的答案是,添加一个“fireFoxFlexShield”元素溢出发生的地方。 fireFoxFlexShield是立即flex-item,然后你把溢出y:滚动到fireFoxFlexShield。

  .textConvBody{ height: 300px; .fireFoxFlexShield{ overflow-y: scroll; height: 100%; .scrollContainer{ width: 100%; max-width: 100%; } } } 

但要小心,因为这可能会打破与Chrome兼容的风格。