Firefox、Edge、IE/Edge で「flex-direction: column-reverse」によりスクロールバーが無効になるのはなぜですか?

さまざまなブラウザでの Flexbox の列反転動作

Flexbox は強力なレイアウト システムを提供しますが、ブラウザ間で特定のプロパティを実装すると不一致が発生します。このような問題の 1 つは、Firefox、Edge、IE の flex-direction: column-reverse プロパティの動作に関係しています。

問題

次の HTML と CSS を考慮してください。コード:

<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>

期待される動作

このコードが Chrome で表示されると、上にスクロールして表示できる項目の垂直リストが作成されます。以前のエントリ。

予期しない動作

ただし、Firefox、Edge、IE/Edge では、スクロール バーが無効になっているように見えます。

理由

この動作は、前述のブラウザーのバグに起因します。 flex-direction: column-reverse が使用されている場合、スクロール バーは Chrome でのみ機能します。 column-reverse を Simply columns に変更すると、スクロール バーはすべてのブラウザで機能します。

追加情報

このバグの詳細については、次を参照してください。リソース:

• Bug 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / flexbugs - 列反転とオーバーフローはありませんスクロール可能 https://github.com/philipwalton/flexbugs/issues/618

以上がFirefox、Edge、IE/Edge で「flex-direction: column-reverse」によりスクロールバーが無効になるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。