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

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

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