Text in einem Flex-Container wird in IE11 nicht umgebrochen

Betrachten Sie das folgende Snippet:

.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 wird der Text wie erwartet umbrochen:

In IE11 wird der Text jedoch nicht umbrochen :

Ist das ein bekannter Fehler im IE? (Wenn ja, wird ein Zeiger geschätzt)

Gibt es eine bekannte Problemumgehung?

Diese ähnliche Frage hat keine eindeutige Antwort und keinen offiziellen Hinweis.

Fügen Sie dies Ihrem Code hinzu:

.child { width: 100%; }

Wir wissen, dass ein Kind auf Blockebene die gesamte Breite des Elternteils einnehmen soll.

Chrome versteht das.

IE11 möchte aus irgendeinem Grund eine explizite Anfrage.

Verwenden flex-basis: 100%oder flex: 1funktioniert auch.

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

Hinweis: Manchmal ist es erforderlich, die verschiedenen Ebenen der HTML-Struktur zu sortieren, um festzustellen, welcher Container den erhält width: 100%. CSS-Zeilenumbruch funktioniert im IE nicht

Ich hatte das gleiche Problem und der Punkt ist, dass das Element seine Breite nicht an den Container anpasste.

Anstatt zu verwenden width:100%, seien Sie konsistent (mischen Sie nicht das Floating-Modell und das Flex-Modell) und verwenden Sie Flex, indem Sie Folgendes hinzufügen:

.child { align-self: stretch; }

Oder:

.parent { align-items: stretch; }

Das hat bei mir funktioniert.

Wie Tyler in einem der Kommentare hier vorgeschlagen hat, mit

max-width: 100%;

am Kind darf arbeiten (für mich gearbeitet). Verwenden align-self: stretchfunktioniert nur, wenn Sie nicht verwenden align-items: center(was ich getan habe). width: 100%Funktioniert nur, wenn Sie nicht mehrere Kinder in Ihrer Flexbox haben, die Sie nebeneinander anzeigen möchten.

Hallo für mich, ich musste die 100% Breite auf das Element der Großeltern anwenden. Nicht seine untergeordneten Elemente.

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

Irgendwie haben all diese Lösungen bei mir nicht funktioniert. Es liegt eindeutig ein IE-Fehler vor flex-direction:column.

Ich habe es erst nach dem Entfernen zum Laufen gebracht flex-direction:

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

Die vorgeschlagenen Lösungen haben mir bei ".child {width: 100%;}" nicht geholfen, da ich ein komplizierteres Markup hatte. Ich habe jedoch eine Lösung gefunden - entfernen Sie "align-items: center;", und dies funktioniert auch in diesem Fall.

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

Die einzige Möglichkeit, diesen Fehler in Spalten mit flexibler Richtung zu 100% zu vermeiden, besteht darin, eine Medienabfrage mit minimaler Breite zu verwenden, um dem untergeordneten Element auf Bildschirmen mit Desktopgröße eine maximale Breite zuzuweisen.

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

Sie müssen natürlich inline untergeordnete Elemente (z. B. <span>oder <a>) auf etwas anderes als Inline setzen (hauptsächlich Anzeige: Block oder Anzeige: Inline-Block), damit die Korrektur funktioniert.

Ich habe meine Lösung hier nicht gefunden, vielleicht ist jemand nützlich:

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

Viel Glück!

.grandparent{
   display: table;
}

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

Das hat bei mir funktioniert.

Auch ich bin auf dieses Problem gestoßen.

Die einzige Alternative besteht darin, eine Breite (oder maximale Breite) in den untergeordneten Elementen zu definieren. IE 11 ist ein bisschen dumm, und ich habe gerade 20 Minuten damit verbracht, diese Lösung zu realisieren.

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

Ich hatte ein ähnliches Problem mit überfüllten Bildern in einem Flex-Wrapper.

Das Hinzufügen von entweder flex-basis: 100%;oder flex: 1;zu dem überfließenden Kind hat für mich funktioniert.

Warum eine komplizierte Lösung verwenden, wenn eine einfache auch funktioniert?

.child {
  white-space: normal;
}