Text in flex-container nicht wickeln Sie Sie in IE11
Betrachten Sie den folgenden Codeausschnitt:
CSS:
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}
HTML:
<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 Chrom, der text umbricht als erwartet:
Aber, IE11, der text ist nicht einwickeln:
Ist dies ein bekannter bug im IE? (wenn ja, wird ein Zeiger geschätzt)
Gibt es einen bekannten workaround?
Eine ähnliche Frage nicht eine eindeutige Antwort und eine offizielle Zeiger.
- Mögliche Duplikate von IE11 flexbox verhindert Zeilenumbruch?
- Das Problem geht Weg, wenn ich entfernen
align-items: center
aus dem übergeordneten element. Das scheint das zu sein, was es verursacht
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie diese zu Ihrem code:
Wissen wir, dass ein block-level-Kind soll, besetzen die gesamte Breite des übergeordneten Elements.
Chrome versteht das.
IE11, aus welchem Grund auch immer, will eine explizite Anforderung.
Mit
flex-basis: 100%
oderflex: 1
auch funktioniert.CSS:
HTML:
Hinweis: Manchmal ist es notwendig, zu Sortieren durch die verschiedenen Ebenen der HTML-Struktur zu ermitteln, welche Behälter wird das
width: 100%
. CSS Zeilenumbruch funktioniert nicht im IEflex: 1 1 50%; display: flex; align-items: center;
. Nicht überraschend ist, DH ein Fehler Auftritt, während word-wrapping lange Texte in den Zellen. Einstellungwidth:100%
funktioniert, aber die Einstellungmin-width: 100%
nicht! Es sollte, aber es nicht (wie alle Dinge, IE), also versuchte ichmax-width: 99%
, und überraschend, es nicht zu arbeiten. Ich denke, mitwidth:100%
könnte besser sein?flex-basis:100%
. Es würde mehr Sinn machen, da die Zelle selbst ist auch ein flex-container.flex-direction: column
auf die Eltern für diese zu arbeiten.flex-basis:100%
funktionierte perfekt für meinen Anwendungsfall..child { width: 100%; }
nicht.Ich hatte das gleiche Problem und der Punkt ist, dass das element nicht passt Ihre Breite an die container.
Anstatt
width:100%
, Einklang (nicht mischen, das floating-Modell und dem flex-Modell) und flex verwenden, indem Sie Folgendes hinzufügen:Oder:
Dieser arbeitete für mich.
Als Tyler hat vorgeschlagen, in einem der Kommentare hier, mit
auf das Kind kann funktionieren (bei mir geklappt). Mit
align-self: stretch
funktioniert nur, wenn Sie nicht mitalign-items: center
(die habe ich).width: 100%
funktioniert nur, wenn man noch nicht mehrere Kinder in Ihrem flexbox, die Sie wollen, um zu zeigen, nebeneinander.Hallo für mich die ich anwenden musste, die 100% Breite, um seine Großeltern element. Nicht das untergeordnete element(s).
Den vorgeschlagenen Lösungen nicht helfen, mich mit ".Kind {width: 100%;}", da hatte ich mehr kompliziertes markup. Aber ich habe eine Lösung gefunden - entfernen "align-items: center;", und es funktioniert für diesen Fall auch zu.
CSS:
HTML:
align-items: center
. Siehe stackoverflow.com/a/39365207/630170Nur so habe ich 100% konsequent in der Lage gewesen um dies zu vermeiden, flex-Richtung Spalte Fehler ist die Verwendung einer min-width Medien Abfrage zuweisen eine max-width, um das untergeordnete element auf die desktop-Größe Bildschirme.
Müssen Sie natürlich inline-Kind-Elemente (zB.
<span>
oder<a>
) auf etwas anderes als inline (vor allem display:block oder display:inline-block) für die Korrektur der Arbeit.Irgendwie alle diese Lösungen für mich nicht funktioniert. Es ist eindeutig ein IE-bug in
flex-direction:column
.Ich nur habe es funktioniert nach dem entfernen
flex-direction
:Warum eine komplizierte Lösung, wenn eine einfache funktioniert auch?