Best IT Recipes

Firefox overflow-y does not work with nested flexbox

I developed a layout of 100% heights 100% wide with css3 flexbox that works like IE11 (and probably IE10 if IE11 emulation is correct).

But Firefox (35.0.1), overflow-y does not work. As you can see in this codefen: http://codepen.io/anon/pen/NPYVga

firefox does not overflow properly. It shows one scroll bar.

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>
+42
firefox flexbox css3 overflow
Feb 20 '15 at 19:35
source share
2 answers

tl; dr: you need min-height:0 in your rule .level-0-row2 . ( Here is the code with this fix .)

More detailed explanation:

Flex items set a default minimum size based on their children’s own size (which does not take into account the "overflow" properties for their descendants / descendants).

Whenever you have an element with overflow: [hidden|scroll|auto] inside the flex element, you need to provide your ancestor element flex min-width:0 (in a horizontal flexible container) or min-height:0 (in a vertical flex container) to disable this minimum size behavior, otherwise the flex element will not decrease less than the size of the minimum content of the child.

For more information on sites bitten by this, see https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 . (Note that this is just a metagug for tracking sites that have been broken into this problem after this spec text has been implemented - this is actually not a bug in Firefox.)

You won't see this in Chrome (at least not in this post), because they have not yet met this minimum size. . (EDIT: Chrome has now performed this minimum size behavior, but they may still incorrectly collapse the minimum sizes to 0 in some cases .)

+101
Feb 20 '15 at 22:58
source share

simple answer, add the element "fireFoxFlexShield" where the overflow occurs. fireFoxFlexShield is an immediate flex element, then you put overflow-y: scroll to fireFoxFlexShield.

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

but be careful, because it might break Chrome-compatible style ..

0
Dec 09 '16 at 3:53 on
source share


More articles:


All Articles