Pourquoi la « hauteur minimale » de mon conteneur Flex est-elle ignorée dans IE10 et IE11 ?

Hauteur minimale du conteneur Flex ignorée dans IE

Lorsque vous travaillez avec flexbox dans IE10 et IE11, vous devriez pouvoir utiliser des termes flexibles standardisés. Cependant, un utilisateur a rencontré un problème où la propriété min-height d'un conteneur flex n'est pas respectée dans ces navigateurs.

La structure HTML spécifiée comporte un div de conteneur avec deux div enfants, chacun avec des hauteurs variables. L'objectif est de positionner le premier enfant en haut et le deuxième enfant en bas, l'espace entre eux étant réparti uniformément à l'aide de justification-content: space-between.

Bien que cette configuration fonctionne dans Chrome et Firefox, il échoue dans IE. La propriété min-height est ignorée, ce qui fait que le conteneur prend la hauteur de son élément enfant le plus haut.

La solution réside dans la résolution d'un problème connu avec le rendu de flexbox par IE. Selon la documentation flexbugs de GitHub (https://github.com/philipwalton/flexbugs#flexbug-3), ces versions de navigateur ont des problèmes pour respecter la propriété min-height pour les conteneurs flex.

Pour résoudre le problème, il suffit faire du conteneur flexible lui-même un élément flexible. Modifiez le CSS comme suit :

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

Ce changement force l'élément body, qui contient le div conteneur, à devenir un élément flexible. Par conséquent, le div du conteneur est désormais reconnu comme un sous-élément flex dans ce contexte, et sa propriété min-height est respectée.

Le JSFiddle révisé démontre la solution, le conteneur adhérant désormais correctement à la hauteur min spécifiée. .

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!