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


176

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:

entrez la description de l'image ici

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

entrez la description de l'image ici

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.



1
Le problème disparaît lorsque je supprime align-items: centerde l'élément parent. Cela semble en être la cause
Nathan Perrier

Réponses:


281

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.

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


13
J'ai dû ajouter de la largeur: 100%; au parent. Ce bogue semble avoir diverses corrections en fonction du contexte. Soupir IE!
Dennis Johnsen

8
Utilisez plutôt "max-width: 100%" sur le .child.
Tyler

2
Je crée un tableau en utilisant flex (chaque ligne est un flex, avec ses enfants ayant flex: 1 1 50%; display: flex; align-items: center;:. Sans surprise, IE échoue lors de l'habillage de mots longs textes dans les cellules. Le réglage width:100%fonctionne, mais le réglage ne le fait min-width: 100%pas! Il devrait, mais ce n'est pas le cas. t (comme toutes les choses IE), donc j'ai essayé max-width: 99%, et étonnamment, il fait le travail que je pense utiliser. width:100%peut - être mieux?
kumarharsh

1
J'ai dû supprimer flex-direction: columnle parent pour que cela fonctionne.
dman le

1
Ce problème semble exclusif aux colonnes flex. Cela ne se produit pas avec les lignes flexibles.
Drazen Bjelovuk

41

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.


2
Ouais, cette réponse a du sens aussi (et est probablement plus correcte que la largeur). Dans l'un de mes designs, régler la largeur: 100% n'est pas possible, et cette solution fonctionne bien.
kumarharsh

11

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.


max-width a fonctionné pour moi lorsqu'il est appliqué au même conteneur que align-items: flex-start a été placé.
Herms

7

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

J'avais "width: auto;" sur les grands-parents. Passer à 100% a résolu ce problème pour moi.
jensanity5000

2

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;

0

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>


Vous n'avez pas besoin de supprimer align-items: center. Voir stackoverflow.com/a/39365207/630170
kumarharsh

0

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.


0

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!


0
.grandparent{
   display: table;
}

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

Cela a fonctionné pour moi.


0

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>

-1

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.


Cette solution existe déjà, il y a des années, et nous n'en avons besoin que d'une, alors évitez de publier des réponses en double.
Ason

-4

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

.child {
  white-space: normal;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.