How Can I Replicate Firefox 33.x Flexbox Behavior in Later Versions?

Replicating FF 33.x Flexbox Behavior in FF 34.x and Beyond

The flexbox implementation in Firefox 34 and later introduces a new feature known as the "implied minimum size of flex items." This change causes elements in flexbox containers to grow beyond the viewport, disrupting previous layouts. Users who rely on flexbox for desktop applications may encounter this issue.

To restore the original FF 33.x behavior, a simple style rule can be added: * { min-height: 0; }. This line sets the minimum height for all elements to zero, preventing them from exceeding their container's height.

However, in some cases, it may be necessary to apply min-height:0 only to specific elements. This applies to elements that:

• Are children of vertical flexbox containers
• Contain tall descendants that are intended to overflow

In the original question, the layout issue arises from a tall element nested within multiple flex containers. To resolve this, min-height:0 should be set for all elements along the nesting chain.

Note that this spec-change caused widespread layout breaks on the web. The bug report provides additional details and examples: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

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