Warum erfolgt in IE11-Flex-Containern kein Textumbruch und wie kann ich das beheben?

Flex-Container-Wrap-Problem in IE11: Lösung und Problemumgehung

Bei der Verwendung eines Flex-Containers zum Ausrichten von Textelementen wurde beobachtet, dass Text Wrapping verhält sich in Chrome und IE11 unterschiedlich. Insbesondere in IE11 wird der Text im Flex-Container nicht umgebrochen, was zu einem Überlauf führt.

Bekannter Fehler und Problemumgehung

Dies ist tatsächlich ein bekannter Fehler in IE11. Um dieses Problem zu beheben, ist es notwendig, die Breite der untergeordneten Elemente innerhalb des Flex-Containers explizit anzugeben. Das Hinzufügen der folgenden CSS-Regel zu Ihrem Code sollte das Umbruchproblem beheben:

.child {
  width: 100%;
}

Alternative Problemumgehungen

Alternative Problemumgehungen umfassen die Verwendung von Flex-Basis: 100 % oder Flex: 1 auf den untergeordneten Elementen. Diese Optionen zwingen IE11 auch dazu, die beabsichtigte Belegung der gesamten Breite von untergeordneten Elementen auf Blockebene innerhalb eines Flex-Containers zu verstehen und zu respektieren.

Beispiel

.child {
  flex-basis: 100%;
}

Erläuterung

IE11 erfordert eine explizite Breitendeklaration, um zu erkennen, dass die untergeordneten Elemente den gesamten verfügbaren Platz innerhalb einnehmen sollten übergeordneter Flex-Container. Im Gegensatz dazu zeigt Chrome auch ohne diese explizite Deklaration das erwartete Umbruchverhalten.

Das obige ist der detaillierte Inhalt vonWarum erfolgt in IE11-Flex-Containern kein Textumbruch und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!