Pourquoi IE ignore-t-il la propriété « min-height » de mon conteneur Flex ?

IE ignorant la hauteur minimale du conteneur flexible

Dans Internet Explorer 10 et 11, les conteneurs flexibles peuvent présenter un comportement inattendu en ce qui concerne la min- propriété de hauteur. Alors que les conteneurs flexibles doivent respecter la hauteur minimale définie, les navigateurs IE l'ignorent.

Pour résoudre ce problème, une solution de contournement existe en faisant du conteneur flexible un élément flexible lui-même. En ajoutant le code suivant à votre CSS :

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

vous transformez efficacement la page entière en un conteneur flexible. Cela permet au conteneur flexible de respecter la propriété min-height dans IE tout en conservant la disposition prévue.

Exemple :

Considérons un conteneur flexible avec deux divs enfants où le Le conteneur a une hauteur minimale de 400 px et les divs enfants ne dépassent pas 400 px. Dans Chrome et Firefox, la mise en page serait comme prévu avec un enfant en haut et l'autre en bas. Cependant, dans IE, le conteneur s'effondrerait à la hauteur de son contenu, en ignorant la propriété min-height.

Solution :

Pour résoudre ce problème, implémentez la solution de contournement en faisant du corps un conteneur flexible. Le code modifié ressemblerait à :

<div>

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!