web-dev-qa-db-de.com

Text in einem Flex-Container wird in IE11 nicht umbrochen

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 umgebrochen:

enter image description here

In IE11 wird der Text jedoch nicht umbrochen :

enter image description here

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

141
Misha Moroshko

Fügen Sie dies Ihrem Code hinzu:

.child { width: 100%; }

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

Chrome versteht das.

IE11 möchte aus irgendeinem Grund eine explizite Anfrage.

Die Verwendung von flex-basis: 100% Oder flex: 1 Funktioniert ebenfalls.

.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 notwendig, die verschiedenen Ebenen der HTML-Struktur zu sortieren, um genau zu bestimmen, welcher Container den width: 100% Erhält. CSS-Textumbruch funktioniert im IE nicht

224
Michael_B

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

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

31
Andry

Wie Tyler in einem der Kommentare hier unter Verwendung von vorgeschlagen hat

max-width: 100%;

am kind darf arbeiten (hat bei mir gearbeitet). Die Verwendung von align-self: stretch Funktioniert nur, wenn Sie nicht align-items: center Verwenden (was ich getan habe). width: 100% Funktioniert nur, wenn sich in Ihrer flexbox) nicht mehrere untergeordnete Elemente befinden, die Sie nebeneinander anzeigen möchten.

9
dude

Hallo für mich, ich musste die 100% Breite auf das Großelternelement anwenden. Nicht die 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;
}
6
Angus Grant

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 - entferne "align-items: center;" und es funktioniert auch für diesen 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>
0
Petr Varyagin

Die einzige Möglichkeit, mit der ich diesen Fehler bei Spalten mit flexibler Ausrichtung zu 100% vermeiden konnte, ist die Verwendung einer Medienabfrage mit minimaler Breite, um dem untergeordneten Element auf Bildschirmen in 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 setzen (zB <span> oder <a>) auf etwas anderes als inline (hauptsächlich display: block oder display: inline-block), damit der Fix funktioniert.

0
Daniel Tonon

Irgendwie haben all diese Lösungen bei mir nicht funktioniert. Es gibt eindeutig einen IE Fehler in flex-direction:column.

Ich habe es erst zum Laufen gebracht, nachdem ich flex-direction:

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