How can I get FF 33.x Flexbox behavior in FF 34.x?
The relevant difference there is the "implied minimum size of flex items", a new feature in the flexbox spec. (or rather, a feature that was removed and re-introduced)
The simplest (bluntest) way to restore the old behavior is to add this style rule: * { min-height:0 }
(or min-width
, if you were concerned about overflow in a horizontal flexbox; but it looks like your testcase only has trouble with overflow from a vertical flex container).
Updated fiddle, with that change: http://jsfiddle.net/yoL2otcr/1/
Really, you should only need to set min-height:0
on specific elements -- in particular, you need it on each element that:
is a child of a 'column'-oriented flex container
has a tall descendant, which you want to allow to overflow (which will perhaps be handled gracefully by an intermediate element with "overflow:scroll", as is the case here)
(In your case, there's actually a nested pile of these elements, since you have a single tall element inside of many nested flex containers. So, you likely need min-height:0
all the way up, unfortunately.)
(If you're curious, this bug has more information & more examples of content that was broken on the web due to this spec-change: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )
none of these fixes worked for me, even though they work. In my case, I was supplying a display: table-cell
fallback, which seemed to be taking over. Using SASS, including it like this, the fallback works for IE without affecting FF:
flex: auto; // or whatever
.ie & {
display: table-cell;
}
It is more simple than that Just give the flex children
.flex-child {
flex: 1;
overflow: hidden;
}
without using min-width: 0
hack