Pourquoi la « hauteur minimale » de mon conteneur Flex est-elle ignorée dans IE et comment puis-je y remédier ?

Hauteur minimale du conteneur Flex ignorée dans IE

Les navigateurs IE ont une histoire notoire avec le rendu flexbox. Parmi ces problèmes, la hauteur minimale apparaît comme une préoccupation particulière pour les conteneurs flexibles. Malgré les attentes de la norme, IE10 et IE11 ne tiennent pas compte de la propriété min-height.

Considérons un scénario dans lequel un div conteneur héberge deux div enfants. Les enfants mesurent moins de 400 pixels, ce qui garantit suffisamment d'espace pour justifier le contenu : espace entre les deux. Le but est d’aligner le premier enfant en haut et le deuxième en bas. Cette configuration fonctionne parfaitement dans Chrome et Firefox, mais pas dans IE.

La racine de ce problème réside dans un bug spécifique de flexbox (Flexbug 3). Pour résoudre ce problème, une solution de contournement simple transforme le conteneur flexible en un élément flexible lui-même. Ceci peut être réalisé en ajoutant la règle CSS suivante :

body {
   display: flex;
   flex-direction: column;
}

L'incorporation de ce CSS résoudra le problème sans aucune autre modification.

Pour une exploration plus approfondie, consultez le référentiel officiel Flexbug : https : //github.com/philipwalton/flexbugs#flexbug-3. Ce référentiel fournit un aperçu de divers bogues de flexbox et propose des solutions de contournement efficaces.

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!