Firefox Overflow-Y Not Working with Nested Flexbox

firefox overflow-y not working with nested flexbox

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

Flexbox overflow issue in Firefox

Just put min-height: 0; to .container-body this will fix your issue

.container .container-body {
  min-height: 0;
}

See this answer for more details

Overflow of item inside nested flex containers in Firefox

I could solve it adding overflow-y: auto; to your #middle element.
Seems like flex is not taking into account that max-height: 100% for Firefox. If you remove it makes no difference.

Btw, I got the idea tweaking a little a jsFiddle I found in the question flexbox misbehaving with max-height

html,body {  width: 100%;  height: 100%;  margin: 0px;}body {  text-align: center;  display: flex;  flex-direction: column;}#top {  background-color: #005200;  color: white;}#bottom {  background-color: #BC0203;  color: white;}#middle {  flex-grow: 2;  background-color: #FD9800;  display: flex;  flex-direction: row;  overflow-y: auto;}#left {  width: 50%;  border-right: 1px solid black;}#right {  width: 50%;  overflow-y: auto;}

<div id="top">  <h1>If you're the big tree</h1></div><div id="middle">  <div id="left">    We are the small axe    <!--SVG will go here -->  </div>  <div id="right">    <p>      Ready      <br>      <br>      <br>      <br>to      <br>      <br>      <br>      <br>cut      <br>      <br>      <br>      <br>you      <br>      <br>      <br>      <br>down    </p>  </div></div><div id="bottom"><em>To cut you down</em></div>

Nesting flexbox inside flexbox overflow. How to fix this?

What you ask for is already happening in Chrome. Which makes me think you're developing with FF.

As a side-note, I believe that's a mistake, simply because you're developing for less than 15% of your target audience to only fix browser differences for another 65% of your audience. Luckily for you, they both keep tight to standards and differences are quite few these days.

Another reason why you might prefer Chrome over FF as a development tool is that FF has consistently been 6 months behind regarding dev tools for at least 4 years now. Don't get me wrong, I'm not a big Chrome fan and I fully welcome using FF as browsing device of choice. But, as a development tool, it's just not the best available. And they're both free.

Back to your question, adding overflow-y:auto to .flexbox seems to fix it in FF, too:

#main {    height: 150px; /* Using a fixed height here, otherwise the snippet wouldn't work */}.flexbox {    display: flex;    flex-direction: column;    overflow-y: auto;}.header {    flex: 0 1 auto;    border: 2px solid #aa0000;}.content {    flex: 1 1 auto;    border: 2px solid #00aa00;}.scrollable {    overflow-y: scroll;}

<html>    <body>        <div id="main" class="flexbox">            <div class="header">                HEADER            </div>            <div class="content flexbox">                <div class="header">                    HEADER                </div>                <div class="content scrollable">                    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>                    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>                    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>                    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>                </div>            </div>        </div>    </body></html>

Using flexbox and overflow hidden & scroll not working in Firefox?

It works for me in firefox 45.0.1 if you remove the height:100% from #tabContent completely. What do you need it for? As the last block element #bottomBlock will always be on the very bottom.
Maybe it's a wierd css overriding/priority issue. I could imagine FF can't calculate the overall content height correctly because of the competetive #tabContent > * and #bottomBlock selectors.

Did you also try making tabContent as a class? Sometimes that solves strange css inherit or override problems (for me).

Overflow property not working in IE Edge and Firefox when using flexbox

see if this plunker is the correct solution for your case
https://plnkr.co/edit/12N6yofXXeUoTrG6tUuZ?p=preview

.container {
  display: flex;
  max-height: 140px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: lightgray;
}
.subheader {
  background: lightblue;
}

.content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;  
  overflow:auto;
}
.content > div {
  flex: 0 1 auto;
}
.nested-content {
  overflow: auto;

}

Firefox Overflow-Y Not Working with Nested Flexbox