Vertical scroll rendering issue in Flexbox in Firefox
This has to do with the flexbox specification's implied minimum sizing algorithm.
This is a Firefox bug.
Adding min-width: 0; min-height: 0
to #wrapper
seems to do the trick:
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
min-height: 0; /* NEW */
min-width: 0; /* NEW */
}
DEMO
Original Answer Below
Currently you have overflow-y: scroll
applied to #left
.
If you also apply overflow-y: scroll
to #wrapper
, the vertical scroll launches in Firefox.
As to why Firefox interprets the code differently than Chrome I can't say. The rendering engines have their differences. I recently addressed another flexbox interpretation issue between IE11 and Chrome:
More information:
Bug 1043520 - (minsizeauto-fallout) Tracking bug for web content breaking due to new "min-width:auto" / "min-height:auto" behavior on flex items
Bug 570036 - Flexible box does not allow overflow scrolling of children elements without extra markup
DEMO: http://jsfiddle.net/seqgz8qv/ (scroll works in FF)
Scroll not working with CSS3 flex box in Firefox
Flexbox and vertical scroll in a full-height app using NEWER flexbox api
Scrolling a flexbox with overflowing content
Rendering problems using flexbox in Firefox and Chrome 48
The flexbox specification was updated making the default minimum size of flex items equal to the size of the content: min-width: auto
/ min-height: auto
.
You can override this setting with min-width: 0
/ min-height: 0
:
.content {
background: yellow;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* NEW */
min-width: 0; /* NEW */
}
http://jsfiddle.net/d4nkevee/1/
Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
Here are some details from the spec:
4.5. Implied Minimum Size of Flex
ItemsTo provide a more reasonable default minimum size for flex items, this
specification introduces a newauto
value as the initial value of
themin-width
andmin-height
properties defined in CSS 2.1. (read more)
UPDATE
It appears that Chrome has updated their rendering behavior. Chrome 48 now emulates Firefox in terms of minimum flex sizing.
Based on reports in the following links, the solution above should work in Chrome 48, as well.
- Possible Chrome 48 flexbox bug causing layout issues. #6841
- Issue 580196: Nested 'flex-direction:column' elements don't shrink properly
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).
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.)
Related Topics
How to Semantically Tag Poem Text
No Video with Supported Format and Mime Type Found. What Does This Mean and How to Change This
HTML to Excel: How Can Tell Excel to Treat Columns as Numbers
How to Set Different Colors in HTML in One Statement
Floated Child Elements: Overflow:Hidden or Clear:Both
How to Style HTML5 <Meter> Tag
Change Navbar Breakpoint in Bootstrap 3.3.2
Get Url and Save It | Chrome Extension
How to Give The Col-Md-1.5 in Bootstrap
Why Setting Absolutely Positioned Element's Sibling as Position:Relative, Brings It Above The Former
How to Vertical Align an Inline-Block in a Line of Text
How to Make <Input Type="File"/> Accept Only These Types