Why Does My Flexbox Layout Change Between Firefox 33.x and 34.x?

FF 34.x Flexbox Discrepancy with FF 33.x Behavior

Users of Firefox 34.x or 35.x have observed unexpected flexbox behavior compared to Firefox 33.1. This discrepancy is attributed to changes introduced in the flexbox specification, primarily the addition of "implied minimum size of flex items."

Resolving the Issue

To restore the behavior of Firefox 33.x in Firefox 34.x, the simplest solution is to apply the following CSS style rule:

• { min-height:0 }

This will override the "implied minimum size" and prevent the layout from growing beyond the viewport.

Specific Use Case

In the original scenario, the layout issue arose due to a specific combination of elements within a "column"-oriented flex container. To ensure proper behavior, the following criteria must be met:

• Add min-height:0 to each child element that:

  • Is a descendant of a "column"-oriented flex container
  • Contains a tall descendant that requires overflow

In cases like the original scenario, where there are multiple nested flex containers, applying min-height:0 to all the nested elements may be necessary.

The above is the detailed content of Why Does My Flexbox Layout Change Between Firefox 33.x and 34.x?. For more information, please follow other related articles on the PHP Chinese website!