How Can I Fix Firefox 34's Broken Flexbox Layout and Restore Firefox 33 Behavior?

Restoring Firefox 33.x Flexbox Behavior in Firefox 34.x

The update to Firefox 34.x has resulted in some unexpected changes in flexbox layout behavior, causing it to exceed the viewport boundaries. This issue is attributed to a modification in the Flexbox specification, specifically the introduction of "implied minimum size of flex items."

To resolve this and restore the previous behavior, the simplest solution is to add the style rule * { min-height:0 } or * { min-width:0 } for horizontal containers. This ensures that elements start with no minimum size and allows them to shrink as necessary.

However, a more targeted approach would be to apply min-height:0 only to specific elements that meet the following criteria:

1. They are children of a 'column'-oriented flex container.
2. They have a tall descendant that is allowed to overflow.

In cases where there are nested flex containers, such as the original example, min-height:0 may need to be applied to all elements in the nesting hierarchy.

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