Warum deaktiviert „Flex-Direction: Column-Reverse' die Bildlaufleiste in Firefox, Edge und IE/Edge?

Flexbox-Spaltenumkehrverhalten in verschiedenen Browsern

Flexbox bietet ein leistungsstarkes Layoutsystem, aber bei der Implementierung bestimmter Eigenschaften in verschiedenen Browsern treten Inkonsistenzen auf. Ein solches Problem betrifft das Verhalten der Eigenschaft „flex-direction: columns-reverse“ in Firefox, Edge und IE.

Das Problem

Beachten Sie das folgende HTML und CSS Code:

<code class="html"><div id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div></code>

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

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

Erwartet Verhalten

Wenn dieser Code in Chrome angezeigt wird, wird eine vertikale Liste von Elementen erstellt, die nach oben gescrollt werden kann, um frühere Einträge anzuzeigen.

Unerwartetes Verhalten

In Firefox, Edge und IE/Edge erscheint jedoch die Bildlaufleiste deaktiviert.

Grund

Dieses Verhalten ist auf einen Fehler in den oben genannten Browsern zurückzuführen. Wenn „flex-direction: Column-reverse“ verwendet wird, ist die Bildlaufleiste nur in Chrome funktionsfähig. Wenn Sie Column-Reverse in Simple Column ändern, funktioniert die Bildlaufleiste in allen Browsern.

Zusätzliche Informationen

Weitere Details zu diesem Fehler finden Sie im Folgenden Ressourcen:

• Bug 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / Flexbugs – Column-Reverse und Overflow-y nicht scrollbar https://github.com/philipwalton/flexbugs/issues /618

Das obige ist der detaillierte Inhalt vonWarum deaktiviert „Flex-Direction: Column-Reverse' die Bildlaufleiste in Firefox, Edge und IE/Edge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!