Pourquoi la disposition de ma Flexbox change-t-elle entre Firefox 33.x et 34.x ?

Différence de FF 34.x Flexbox avec le comportement de FF 33.x

Les utilisateurs de Firefox 34.x ou 35.x ont observé une flexbox inattendue comportement par rapport à Firefox 33.1. Cet écart est attribué aux changements introduits dans la spécification flexbox, principalement l'ajout de « taille minimale implicite des éléments flexibles ».

Résoudre le problème

Pour restaurer le comportement de Firefox 33.x dans Firefox 34.x, la solution la plus simple est d'appliquer la règle de style CSS suivante :

• { min-height:0 }

Cela remplacera la « taille minimale implicite » et empêchera la mise en page de s'étendre au-delà de la fenêtre d'affichage.

Cas d'utilisation spécifique

Dans le scénario d'origine, le problème de mise en page est survenu en raison d'une combinaison spécifique d'éléments au sein d'un conteneur flexible orienté "colonne". Pour garantir un comportement approprié, les critères suivants doivent être remplis :

• Ajoutez min-height:0 à chaque élément enfant qui :

  • Est un descendant d'un Conteneur flexible orienté "colonne"
  • Contient un grand descendant qui nécessite overflow

Dans des cas comme le scénario d'origine, où il existe plusieurs conteneurs flexibles imbriqués, l'application de min-height:0 à tous les éléments imbriqués peut être nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!