Le texte dans un conteneur flexible ne se termine pas dans IE11

Considérez l’extrait suivant:

.parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum is simply dummy text of the printing and typesetting industry

Dans Chrome, le texte s’enveloppe comme prévu:

entrer la description de l'image ici

Mais, dans IE11, le texte ne s’emballe pas :

entrer la description de l'image ici

Est-ce un bug connu dans IE? (si oui, un pointeur sera apprécié)

Y a-t-il une solution de contournement connue?


Cette question similaire n’a pas de réponse définitive et un pointeur officiel.

Ajoutez ceci à votre code:

 .child { width: 100%; } 

Nous soaps qu’un enfant de niveau bloc est supposé occuper toute la largeur du parent.

Chrome comprend cela.

IE11, pour quelque raison que ce soit, souhaite une demande explicite.

Utilisation de la flex-basis: 100% ou flex: 1 fonctionne également.

 .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; width: calc(100% - 2px); /* NEW; used calc to adjust for parent borders */ } 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum is simply dummy text of the printing and typesetting industry

J’ai eu le même problème et le fait est que l’élément n’adaptait pas sa largeur au conteneur.

Au lieu d’utiliser width:100% , soyez cohérent (ne mélangez pas le modèle flottant et le modèle flex) et utilisez flex en ajoutant ceci:

 .child { align-self: stretch; } 

Ou:

 .parent { align-items: stretch; } 

Cela a fonctionné pour moi.

Comme Tyler l’ a suggéré dans l’un des commentaires ici, en utilisant

 max-width: 100%; 

sur l’enfant peut travailler (travaillé pour moi). Utiliser align-self: stretch ne fonctionne que si vous n’utilisez pas align-items: center (ce que j’ai fait). width: 100% ne fonctionne que si vous n’avez pas plusieurs enfants dans votre flexbox que vous voulez montrer côte à côte.

Salut pour moi j’ai dû appliquer la largeur de 100% à son élément grand-parent. Pas son (s) élément (s) enfant (s).

  .grandparent { float:left; clear: both; width:100%; //fix for IE11 text overflow } .parent { display: flex; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } 

Pourquoi utiliser une solution compliquée si une simple fonctionne aussi?

 .child { white-space: normal; }