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 )