Text in einem Flex-Container wird in IE11 nicht umgebrochen

175

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:

Geben Sie hier die Bildbeschreibung ein

In IE11 wird der Text jedoch nicht umbrochen :

Geben Sie hier die Bildbeschreibung ein

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.

Mischa Moroshko
quelle
1
Mögliches Duplikat der IE11-Flexbox, das das Umbrechen
Simen S
1
Das Problem verschwindet, wenn ich es align-items: centeraus dem übergeordneten Element entferne . Das scheint die Ursache zu sein
Nathan Perrier

Antworten:

277

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.

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

Michael Benjamin
quelle
13
Ich musste Breite hinzufügen: 100%; an die Eltern. Dieser Fehler scheint je nach Kontext verschiedene Korrekturen zu haben. Seufz IE!
Dennis Johnsen
8
Verwenden Sie lieber "max-width: 100%" für das .child.
Tyler
2
Ich erstelle eine Tabelle mit Flex (jede Zeile ist ein Flex, dessen Kinder Folgendes haben : flex: 1 1 50%; display: flex; align-items: center;. Es überrascht nicht, dass der IE beim Umschließen langer Texte in die Zellen fehlschlägt. Die Einstellung width:100%funktioniert, die Einstellung jedoch min-width: 100%nicht! Sie sollte, aber sie funktioniert nicht. t (wie alle Dinge IE), also versuchte ich max-width: 99%, und überraschend, es tut Arbeit , die ich denke , mit. width:100%könnte besser sein?
kumarharsh
1
Ich musste flex-direction: columndas Elternteil entfernen, damit dies funktioniert.
Dman
1
Dieses Problem scheint ausschließlich für Flex-Spalten zu gelten. Kommt bei flexiblen Reihen nicht vor.
Drazen Bjelovuk
40

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.

Andry
quelle
2
Ja, diese Antwort macht auch Sinn (und ist wahrscheinlich korrekter als die Breite). In einem meiner Designs ist das Einstellen der Breite: 100% nicht möglich, und diese Lösung funktioniert gut.
Kumarshar
11

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.

Kumpel
quelle
Die maximale Breite hat bei mir funktioniert, wenn sie auf denselben Container angewendet wurde, auf den die Elemente ausgerichtet wurden: Flex-Start wurde platziert.
Herms
7

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;
}
Angus Grant
quelle
Ich hatte "width: auto;" auf Großeltern. Der Wechsel zu 100% hat dies für mich behoben.
Jensanity5000
2

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;
Fabian von Ellerts
quelle
0

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>

Petr Varyagin
quelle
Sie müssen nicht entfernen align-items: center. Siehe stackoverflow.com/a/39365207/630170
kumarharsh
0

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.

Daniel Tonon
quelle
0

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

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

Viel Glück!

Robert Freund
quelle
0
.grandparent{
   display: table;
}

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

Das hat bei mir funktioniert.

Shruti Agrawal
quelle
0

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>
Thomas Aumaitre
quelle
-1

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.

Saša Nikolič
quelle
Diese Lösung gibt es bereits vor Jahren, und wir brauchen nur eine. Vermeiden Sie es daher, doppelte Antworten zu veröffentlichen.
Ason
-4

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

.child {
  white-space: normal;
}
Sergey Aldoukhov
quelle