How Can I Restore Firefox 33.x Flexbox Behavior in Firefox 34.x and Later?

Restoring Flexbox Behavior from Firefox 33.x in Firefox 34.x and Beyond

Recent updates to Firefox (in versions 34 and 35) have altered the default behavior of Flexbox. If you rely heavily on Flexbox for your application's layout and noticed unexpected changes, this article will guide you in replicating the behavior found in Firefox 33.x in newer versions.

The primary difference between Flexbox in Firefox 33.x and 34.x lies in the introduction of "implied minimum size of flex items." This feature, which was removed and then re-added to the Flexbox specification, allocates a minimum size to flex items, causing them to extend beyond the viewport in certain scenarios.

To restore the behavior from Firefox 33.x, you can add the following style rule:

* { min-height: 0; }

This rule effectively sets the minimum height of all elements to 0, allowing the flex layout to behave as it did in Firefox 33.x.

Alternatively, you can apply min-height: 0 only to specific elements that meet the following criteria:

• Children of a vertically-oriented (column) flex container
• Contain a tall descendant that requires overflow

In your particular case, you likely need to apply min-height: 0 throughout the nested flex containers in your application, as each element in the hierarchy may have a tall descendant that needs overflow handling.

For additional insights and examples of content affected by this Flexbox spec change, please refer to the following Mozilla bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

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