Pourquoi la « hauteur min » de mon conteneur Flexbox est-elle ignorée dans Internet Explorer ?

Flexbox : hauteur minimale ignorée dans Internet Explorer

Lors de la tentative d'implémentation d'un conteneur flexible à l'aide de termes flexbox standardisés dans Internet Explorer (IE) versions 10 et 11, les utilisateurs peuvent rencontrer un problème où la propriété min-height spécifiée est ignorée. Cela peut entraîner un comportement inattendu, car la hauteur du conteneur n'est pas limitée à une valeur minimale.

Problème :

Un conteneur flexible avec deux divs enfants présente un comportement de hauteur inattendu. dans IE. Les divs enfants ont une hauteur inférieure à 400 px, mais la propriété min-height du conteneur de 400 px est ignorée, ce qui entraîne un conteneur qui ne s'étend pas pour s'adapter à la propriété justifier-contenu : espace-entre. Cela empêche le premier div enfant de s'aligner vers le haut et le deuxième div enfant de s'aligner vers le bas.

Solution :

Pour résoudre ce problème dans IE 10 et 11, il est nécessaire de faire du conteneur flexible lui-même un élément flexible. Ceci peut être réalisé en ajoutant le CSS suivant au code :

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

En définissant l'élément body comme élément flexible, le div du conteneur hérite des propriétés flexbox et respecte correctement la propriété min-height.

Exemple révisé :

Le code mis à jour avec le correctif d'élément flexible est disponible dans la version révisée. violon :

<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!