Le texte dans un conteneur flex n'est pas enveloppé dans IE11

Considérez l'extrait de code suivant:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Dans Chrome, le texte s'enroule comme prévu:

Mais, dans IE11, le texte n'est pas enveloppant :

S'agit-il d'un bogue connu dans IE? (si oui, un pointeur sera apprécié)

Existe-t-il une solution de contournement connue?

Cette question similaire n'a pas de réponse définitive ni d'indicateur officiel.

Ajoutez ceci à votre code:

.child { width: 100%; }

Nous savons qu'un enfant de niveau bloc est censé occuper toute la largeur du parent.

Chrome comprend cela.

IE11, pour une raison quelconque, souhaite une demande explicite.

Utilisation flex-basis: 100%ou flex: 1fonctionne é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 */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Remarque: il sera parfois nécessaire de trier les différents niveaux de la structure HTML pour identifier le conteneur qui reçoit le fichier width: 100%. Le texte d'habillage CSS ne fonctionne pas dans IE

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 (a travaillé pour moi). L'utilisation align-self: stretchne 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 fils dans votre flexbox que vous souhaitez afficher côte à côte.

Salut pour moi, j'ai dû appliquer la largeur 100% à son élément grand-parent. Pas ses éléments enfants.

.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;
}

D'une manière ou d'une autre, toutes ces solutions n'ont pas fonctionné pour moi. Il y a clairement un bogue IE dansflex-direction:column .

Je ne l'ai fait fonctionner qu'après avoir supprimé flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

Les solutions proposées ne m'ont pas aidé avec ".child {width: 100%;}", car j'avais un balisage plus compliqué. Cependant, j'ai trouvé une solution - supprimer "align-items: center;", et cela fonctionne aussi pour ce cas.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

La seule façon dont j'ai toujours réussi à 100% à éviter ce bogue de colonne de direction flexible est d'utiliser une requête multimédia de largeur minimale pour attribuer une largeur maximale à l'élément enfant sur les écrans de la taille d'un bureau.

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

Vous devrez définir des éléments enfants naturellement inline (par exemple <span>ou <a>) sur autre chose que inline (principalement display: block ou display: inline-block) pour que le correctif fonctionne.

Je n'ai pas trouvé ma solution ici, peut-être que quelqu'un me sera utile:

.child-with-overflowed-text{
  word-wrap: break-all;
}

Bonne chance!

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

Cela a fonctionné pour moi.

Moi aussi j'ai rencontré ce problème.

La seule alternative est de définir une largeur (ou max-width) dans les éléments enfants. IE 11 est un peu stupide, et moi je viens de passer 20 minutes à réaliser cette solution.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

J'ai eu un problème similaire avec des images débordantes dans un wrapper flex.

L'ajout de l'un flex-basis: 100%;ou l' autre ou flex: 1;de l'enfant débordant a fonctionné pour moi.

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

.child {
  white-space: normal;
}