firefox overflow-y not working with nested flexbox

Question

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>

dholbert · Accepted Answer · 2017-01-03 22:11:54Z

186

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.)

edited Jan 3, 2017 at 22:11

answered Feb 20, 2015 at 22:58

dholbert

11.9k3 gold badges44 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ambroz Bizjak Over a year ago

I've hit this issue but I had to add min-height:0 to all the parent flexbox columns - any idea why?

Sam Storie Over a year ago

Does this min-height (in my case) need to be applied to every ancestor? Or just the immediate parent?

dholbert Over a year ago

It potentially needs to be applied to every ancestor that is a flex item (i.e. every ancestor whose parent is display:flex), depending on the circumstances.

Brett Over a year ago

Any reason we can't just apply * { min-height: 0; min-width: 0; }?

dholbert Over a year ago

@Brett, here's a jsfiddle demonstrating the sort of badness (content overflowing/overlapping) that can arise from using min-width:0 too aggressively: jsfiddle.net/85scnr1b So really, you only want to add min-width:0 on flex items whose content can "behave nicely" if it's given an arbitrarily-smaller width than it expects. (Same goes for min-height & height, for vertical flex containers.)

|

rekna · Accepted Answer · 2021-07-22 06:19:39Z

0

Recently I have found a better solution:

Instead of using:

flex:1 1 auto;
min-height: 0;

it's even better to use:

flex:1 1 0;

Basically this tells the browser to set the size of the element initially to 0 (so replacing min-height) and allow it to expand by a ratio of 1.

There is a really good video for explaining how flexbox works by Kevin Powell which I highly recommend to watch (https://www.youtube.com/watch?v=fm3dSg4cxRI) It explains in detail how flexbox algoritm works.

answered Jul 22, 2021 at 6:19

rekna

5,3337 gold badges47 silver badges58 bronze badges

Collectives™ on Stack Overflow

firefox overflow-y not working with nested flexbox

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related