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

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.

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

Solution 2

It is more simple than that Just give the flex children

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

without using min-width: 0 hack

Solution 3

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;
}

Comments

[Michael Benjamin]

stackoverflow.com/q/36247140/3597276

[Timm]

Thanks for the suggested fix. I was able to get the desired behavior in FF 33 and FF 35, and can now calmly get to the bottom of this and make switch to using this only where absolutely needed.

[beardofprey]

I had a similar issue with a row of flex items which contained a dynamic number of images. The images used to scale, but since FF 34 they were overflowing the container. In my case, I also had to set min-width:0 on the flex items.

[dholbert]

Yup -- it depends on which way your flex container is oriented. For flex-direction:row (the default), you'd want to set min-width:0 on its children, to explicitly allow them to shrink below their min-content size. For flex-direction:column, you'd want min-height:0 on its children. (When in doubt, though, it should be fine to set both min-width & min-height to 0, as long as doing so doesn't stomp on amin-width value that you set elsewhere in your styles & depend on -- these properties traditionally had 0 as their initial value.)