Il testo in un contenitore flessibile non si avvolge in IE11

Considera il seguente frammento:

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

In Chrome, il testo viene spostato come previsto:

Ma, in IE11, il testo non è a capo :

È un bug noto in IE? (se sì, sarà apprezzato un puntatore)

Esiste una soluzione alternativa nota?

Questa domanda simile non ha una risposta definitiva e un puntatore ufficiale.

Aggiungi questo al tuo codice:

.child { width: 100%; }

Sappiamo che un bambino a livello di blocco dovrebbe occupare l'intera larghezza del genitore.

Chrome lo capisce.

IE11, per qualsiasi motivo, desidera una richiesta esplicita.

Utilizzando flex-basis: 100%o flex: 1funziona anche.

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

Nota: a volte sarà necessario ordinare i vari livelli della struttura HTML per individuare quale contenitore ottiene width: 100%. Il testo a capo CSS non funziona in IE

Ho avuto lo stesso problema e il punto è che l'elemento non stava adattando la sua larghezza al contenitore.

Invece di usare width:100%, sii coerente (non mescolare il modello flottante e il modello flessibile) e usa la flessibilità aggiungendo questo:

.child { align-self: stretch; }

O:

.parent { align-items: stretch; }

Questo ha funzionato per me.

Come ha suggerito Tyler in uno dei commenti qui, usando

max-width: 100%;

sul bambino può funzionare (ha funzionato per me). Usare align-self: stretchfunziona solo se non lo stai usando align-items: center(cosa che ho fatto). width: 100%Funziona solo se non hai più figli all'interno del tuo flexbox che vuoi mostrare fianco a fianco.

Ciao per me ho dovuto applicare la larghezza del 100% al suo elemento nonno. Non i suoi elementi figlio.

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

In qualche modo tutte queste soluzioni non hanno funzionato per me. È chiaramente presente un bug IE flex-direction:column.

Ho funzionato solo dopo aver rimosso flex-direction:

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

Le soluzioni proposte non mi hanno aiutato con ".child {larghezza: 100%;}", dato che avevo un markup più complicato. Tuttavia, ho trovato una soluzione: rimuovere "align-items: center;", e funziona anche in questo caso.

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

L'unico modo in cui sono stato costantemente in grado di evitare questo bug di colonna a direzione flessibile al 100% è utilizzare una query multimediale di larghezza minima per assegnare una larghezza massima all'elemento figlio su schermi di dimensioni desktop.

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

Sarà necessario impostare elementi figlio naturalmente incorporati (ad es. <span>O <a>) su qualcosa di diverso da inline (principalmente display: block o display: inline-block) affinché la correzione funzioni.

Non ho trovato la mia soluzione qui, forse qualcuno sarà utile:

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

In bocca al lupo!

.grandparent{
   display: table;
}

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

Questo ha funzionato per me.

Anch'io ho riscontrato questo problema.

L'unica alternativa è definire una larghezza (o larghezza massima) negli elementi figlio. IE 11 è un po 'stupido e io ho appena trascorso 20 minuti per realizzare questa soluzione.

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

Ho avuto un problema simile con immagini straripanti in un involucro flessibile.

L'aggiunta di uno flex-basis: 100%;o flex: 1;al figlio straripante ha funzionato per me.

Perché usare una soluzione complicata se funziona anche una semplice?

.child {
  white-space: normal;
}