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

Firefox、Edge、IE における Flexbox の列反転の問題

レスポンシブ アプリケーションを作成する場合、コンテンツの表示に Flexbox を使用するのが一般的です。特定のシナリオでは、画面サイズが変更されたときに要素の順序を逆にすることが必要な場合があります。これは Chrome ではシームレスに機能しますが、Firefox、Edge、Internet Explorer では不可解な問題が発生します。

この問題は、flex-direction: column-reverse を使用して項目の順序を逆にするときに明らかになります。 Chrome では、スクロールバーが期待どおりに動作し、ユーザーが上にスクロールして前の項目を表示できるようになります。ただし、影響を受けるブラウザでは、スクロールバーは表示されますが無効のままです。

この問題を実証するために、次のコードを調べてみましょう。

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

このコードを使用すると、 Firefox、Edge、IE における前述の問題。

根本原因と解決策

この問題は、影響を受けるブラウザに存在するバグに起因します。具体的には、flex-direction: column-reverse および overflow-y: auto を使用すると、スクロールバーが意図したとおりに機能しません。

回避策として、flex-direction: column-reverse の代わりに column を使用できます。 。この方法では、同じ視覚効果が得られ、サポートされているすべてのブラウザでスクロールバーが正しく動作することが保証されます。

追加情報

この問題の詳細と洞察については、次を参照してください。次のリソースに移動します:

• [Flexbugs - Column-reverse および overflow-y はスクロールできません](https://github.com/philipwalton/flexbugs/issues/104)
• [バグ 1042151 - flex-direction: column-reverse (または "flex-direction:column; justify-content:flex-end") with overflow-y: auto はスクロールできません](https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

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