Firefox 34+ Breaks without min-width/height=0

[GLStephen]

trafficstars

https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

The initial value of min-width/height on flex items has been reverted to auto

Bug 984711 – Add back "min-width:auto" / "min-height:auto" for flex items Bug 1015474 – Update min-width:auto/min-height:auto support to match updated flexbox spec language Bug 1057683 – http://i100.independent.co.uk/ is broken in Nightly, due to the new "min-height:auto" flex item behavior (from flexbox spec change)

[kristoferjoseph]

Interesting. Thanks for the info.

[kristoferjoseph]

Sooo, not sure what to do about this. Ideally I want one implementation that is consistent across all browsers, but if I add a specific min-width: auto; min-height: auto I am going to get a PRs removing it. What do you think?

[felixsanz]

Follow the spec?

Update min-width:auto/min-height:auto support to match updated flexbox spec language

[kristoferjoseph]

@felixsanz @GLStephen OK I will explicitly add min-width/min-height: auto to flex items.

[cmoralesweb]

I've been having troubles with this lately. The problem doesn't come from flex items but with descendants of flex items, mainly images:

http://stackoverflow.com/questions/29604873/firefox-not-scaling-img-with-max-width?lq=1

I've tried many solutions, and the only one that works cross-browser is this: http://stackoverflow.com/a/26916542/1203176

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

So, instead of adding min-width to flex items, you should add this to the root:

* {
    min-width: 0;
    min-height: 0;
}