How Can I Maintain FF 33.x Flexbox Compatibility in FF 34.x and Later?

Achieving FF 33.x Flexbox Compatibility in FF 34.x

In Firefox 34.x, Flexbox behavior has undergone modifications. This has caused some previously functional layouts to break.

The Implied Minimum Size Issue

The primary discrepancy between FF 33.x and 34.x Flexbox implementations centers around implied minimum size for flex items. In FF 34.x, this feature has been reintroduced, impacting layout behavior.

Recreating FF 33.x Behavior

To restore the FF 33.x behavior in FF 34.x or 35.x, apply this CSS rule:

* { min-height:0 }

This rule universally sets the minimum height to zero, overriding the new default behavior.

Targeted Application

While the above rule is a straightforward solution, min-height:0 should ideally be applied only to specific elements that need it. Specifically, this rule needs to be applied to any element that:

• Is a child of a column-oriented flex container
• Contains a tall descendant that should be allowed to overflow

Example

For instance, in the provided fiddle (http://jsfiddle.net/yoL2otcr/1/), min-height:0 has been applied to correct the overflow issue.

Further Information

For additional information and examples on this specific Flexbox spec change, refer to the Mozilla bug tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

The above is the detailed content of How Can I Maintain FF 33.x Flexbox Compatibility in FF 34.x and Later?. For more information, please follow other related articles on the PHP Chinese website!