Pourquoi la « hauteur minimale » de mon conteneur Flex est-elle ignorée dans Internet Explorer 10 et 11 ?

Hauteur minimale négligée du conteneur Flex dans Internet Explorer

Malgré la prise en charge généralisée des propriétés flexbox standardisées, Internet Explorer 10 et 11 présentent un comportement particulier lorsque il s’agit de conteneurs flexibles. Un de ces problèmes se pose lorsque la propriété min-height est ignorée.

Considérons un div conteneur contenant deux div enfants, chacun ayant une hauteur maximale de 400 px. En utilisant les propriétés CSS flex, justifier-contenu : espace-entre ; est destiné à répartir uniformément l’espace vertical entre les divs enfants. Cependant, cet alignement fonctionne parfaitement dans Chrome et Firefox mais pas dans Internet Explorer.

La solution réside dans la définition du conteneur flexible lui-même en tant qu'élément flexible. En ajoutant simplement display: flex; et flex-direction : colonne ; à l'élément body, la propriété min-height du conteneur est respectée dans Internet Explorer 10 et 11. Cela garantit une bonne répartition de l'espace entre les divs enfants.

Cette solution de contournement résout le bug flexbox spécifique aux versions 10 et 11 d'Internet Explorer. , garantissant un comportement cohérent sur tous les navigateurs modernes. De plus amples détails sur ce problème peuvent être trouvés sur https://github.com/philipwalton/flexbugs#flexbug-3.

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!