Warum deaktiviert „flex-direction: Column-reverse' das Scrollen in Firefox, Edge und IE?

Flexbox-Spaltenumkehrproblem in Firefox, Edge und IE

Beim Erstellen responsiver Anwendungen wird häufig Flexbox zum Anzeigen von Inhalten verwendet. In bestimmten Szenarien möchten Sie möglicherweise die Reihenfolge der Elemente umkehren, wenn sich die Bildschirmgröße ändert. Während dies in Chrome reibungslos funktioniert, tritt in Firefox, Edge und Internet Explorer ein rätselhaftes Problem auf.

Das Problem wird deutlich, wenn Sie „flex-direction: Column-reverse“ verwenden, um die Reihenfolge der Elemente umzukehren. In Chrome verhält sich die Bildlaufleiste wie erwartet, sodass Benutzer nach oben scrollen können, um vorherige Elemente anzuzeigen. In den betroffenen Browsern wird die Bildlaufleiste jedoch angezeigt, bleibt jedoch deaktiviert.

Um dieses Problem zu veranschaulichen, untersuchen wir den folgenden Code:

<code class="css">#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}</code>

Bei Verwendung dieses Codes werden Sie Folgendes bemerken oben erwähntes Problem in Firefox, Edge und IE.

Ursache und Lösung

Dieses Problem ist auf einen Fehler zurückzuführen, der in den betroffenen Browsern vorhanden ist. Insbesondere bei Verwendung von „flex-direction: Column-reverse“ und „overflow-y: auto“ funktioniert die Bildlaufleiste nicht wie vorgesehen.

Um dieses Problem zu umgehen, können Sie „column“ anstelle von „flex-direction: Column-reverse“ verwenden . Dieser Ansatz erzielt den gleichen visuellen Effekt und stellt sicher, dass die Bildlaufleiste in allen unterstützten Browsern korrekt funktioniert.

Zusätzliche Informationen

Weitere Details und Einblicke zu diesem Problem finden Sie unter zu den folgenden Ressourcen:

• [Flexbugs – Column-reverse und overflow-y nicht scrollbar](https://github.com/philipwalton/flexbugs/issues/104)
• [Fehler 1042151 – Flex-Direction: Column-Reverse (oder „Flex-Direction: Column; Justify-Content: Flex-End“) mit Overflow-y: Auto ist nicht scrollbar] (https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

Das obige ist der detaillierte Inhalt vonWarum deaktiviert „flex-direction: Column-reverse' das Scrollen in Firefox, Edge und IE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!