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.
css
internet-explorer
flexbox
internet-explorer-11
Mischa Moroshko
quelle
quelle
align-items: center
aus dem übergeordneten Element entferne . Das scheint die Ursache zu seinAntworten:
Fügen Sie dies Ihrem Code hinzu:
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%
oderflex: 1
funktioniert auch.Code-Snippet anzeigen
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 nichtquelle
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 Einstellungwidth:100%
funktioniert, die Einstellung jedochmin-width: 100%
nicht! Sie sollte, aber sie funktioniert nicht. t (wie alle Dinge IE), also versuchte ichmax-width: 99%
, und überraschend, es tut Arbeit , die ich denke , mit.width:100%
könnte besser sein?flex-direction: column
das Elternteil entfernen, damit dies funktioniert.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:Oder:
Das hat bei mir funktioniert.
quelle
Wie Tyler in einem der Kommentare hier vorgeschlagen hat, mit
am Kind darf arbeiten (für mich gearbeitet). Verwenden
align-self: stretch
funktioniert nur, wenn Sie nicht verwendenalign-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.quelle
Hallo für mich, ich musste die 100% Breite auf das Element der Großeltern anwenden. Nicht seine untergeordneten Elemente.
quelle
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
:quelle
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.
quelle
align-items: center
. Siehe stackoverflow.com/a/39365207/630170Die 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.
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.quelle
Ich habe meine Lösung hier nicht gefunden, vielleicht ist jemand nützlich:
Viel Glück!
quelle
Das hat bei mir funktioniert.
quelle
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.
quelle
Ich hatte ein ähnliches Problem mit überfüllten Bildern in einem Flex-Wrapper.
Das Hinzufügen von entweder
flex-basis: 100%;
oderflex: 1;
zu dem überfließenden Kind hat für mich funktioniert.quelle
Warum eine komplizierte Lösung verwenden, wenn eine einfache auch funktioniert?
quelle