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

DDD
リリース: 2024-11-01 01:59:02
オリジナル
922 人が閲覧しました

Why does `flex-direction: column-reverse` disable the scrollbar in Firefox, Edge, and IE/Edge?

さまざまなブラウザでの 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート