Pourquoi le texte n'est-il pas renvoyé à la ligne dans les conteneurs Flex IE11 et comment puis-je y remédier ?

Problème d'enveloppement du conteneur flexible dans IE11 : résolution et solution de contournement

Lors de l'utilisation d'un conteneur flexible pour aligner des éléments de texte, il a été observé que le texte l'emballage se comporte différemment dans Chrome et IE11. Plus précisément, dans IE11, le texte dans le conteneur flexible ne parvient pas à être renvoyé à la ligne, ce qui entraîne un débordement.

Bogue connu et solution de contournement

Il s'agit en effet d'un bug connu dans IE11. Pour résoudre ce problème, il est nécessaire de spécifier explicitement la largeur des éléments enfants dans le conteneur flex. L'ajout de la règle CSS suivante à votre code devrait résoudre le problème d'encapsulage :

.child {
  width: 100%;
}

Solutions de contournement alternatives

Les solutions de contournement alternatives incluent l'utilisation de flex-basis : 100 % ou flex : 1 sur les éléments enfants. Ces options obligent également IE11 à comprendre et à respecter l'occupation prévue sur toute la largeur des éléments enfants au niveau du bloc dans un conteneur flexible.

Exemple

.child {
  flex-basis: 100%;
}

Explication

IE11 nécessite une déclaration de largeur explicite pour reconnaître que les éléments enfants doivent occuper tout l'espace disponible au sein du parent conteneur flexible. En revanche, Chrome présente le comportement d'encapsulage attendu même sans cette déclaration explicite.

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!