web-dev-qa-db-fra.com

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;
}
<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 est enveloppé comme prévu:

enter image description here

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

enter image description here

Est-ce un bug 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 et un pointeur officiel.

csscss3internet-explorerflexboxinternet-explorer-11
141
Misha Moroshko

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.

Utiliser 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 */
}
<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: Parfois, il sera nécessaire de trier les différents niveaux de la structure HTML pour identifier le conteneur qui obtient le width: 100%. le texte renvoyé par CSS ne fonctionne pas dans IE

224
Michael_B

J'avais 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.

31
Andry

Comme Tyler 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 afficher côte à côte.

9
dude

Salut pour moi, je devais appliquer la largeur de 100% à son élément de 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;
}
6
Angus Grant

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 également dans 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>
0
Petr Varyagin

La seule façon pour moi de toujours éviter ce bogue de colonne flex-direction consiste à utiliser une requête multimédia de largeur minimale pour attribuer une largeur maximale à l'élément enfant sur des é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
    }
}

Pour que le correctif fonctionne, vous devez définir des éléments enfants naturellement en ligne (par exemple, <span> ou <a>) en-ligne (principalement display: block ou display: inline-block).

0
Daniel Tonon

D'une manière ou d'une autre, toutes ces solutions ne fonctionnaient pas pour moi. Il y a clairement un bogue IE dans flex-direction:column.

Je ne l'ai obtenu qu'après avoir retiré flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;
0
Fabian von Ellerts