How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]

Question

We use flexbox heavily for an desktop application like looking web app and it has been working out great.

But with the latest Firefox Developer Edition (35.0a2) the layout does not behave as expected (it grows beyond the viewport): http://tinyurl.com/k6a8jde

This works fine in Firefox 33.1.

I would assume this has something to do with the flexbox changes described here: https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

But sadly I can't yet figure out a way to get the FF 33.x behavior in FF 34 or 35.x.

Any help regarding the layout or how to better isolate the problem is appreciated.

Answer 1

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:

1. is a child of a 'column'-oriented flex container

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

Answer 2

It is more simple than that Just give the flex children

.flex-child {
  flex: 1;
  overflow: hidden;
}

without using min-width: 0 hack