「flex-direction: column-reverse」が Firefox、Edge、IE でスクロールの問題を引き起こすのはなぜですか?

Firefox、Edge、IE での Flexbox 列反転のスクロールの問題

div のリストが含まれる応答性の高いアプリケーションを作成しようとするとflexbox プロパティを使用して、大きな画面では上向きスクロールで表示され、小さな画面では逆の順序で下向きスクロールで表示されます。 「column-reverse」は理想的な解決策のように思えました。ただし、Chrome 以外のブラウザでは特有の問題が発生しました。

HTML 構造と CSS スタイル

HTML は、一連の要素を含む 'リスト' div で構成されていました。 「アイテム」div。 CSS は、「display: flex」と「flex-direction: column-reverse」を「list」 div に割り当て、項目が垂直方向に積み重ねられ、反転されるようにしました。高さと「overflow-y」プロパティにより垂直スクロールが可能になり、視覚的にわかりやすくするために境界線が追加されました。

ブラウザ間のスクロール動作

Chrome では、「リスト」 ' div は機能的なスクロールバーを表示し、ユーザーが上にスクロールして前の項目を表示できるようにしました。ただし、Firefox、Edge、IE11 では、スクロールバーが表示されても無効のままで、スクロールできません。

バグの説明

調査の結果、この動作は Firefox のバグであることが判明しました。 、エッジ、IE11。 「flex-direction: column-reverse」および「overflow-y: auto」を使用すると、スクロールバーが表示されません。

解決策

「column」プロパティの場合「column-reverse」の代わりに を使用すると、スクロールバーがすべてのブラウザで機能するようになります。 「justify-content: flex-end」プロパティは、適切な下方向スクロールのために「list」 div の下部に項目を配置するためにも必要です。

追加情報

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

• バグ 1042151 - flex-direction: 列反転 (または "flex-direction:column; justify-content:flex-end") と overflow-y: auto はスクロール可能ではありません
• Philip Walton / flexbugs - Column-reverse およびオーバーフロー-y はスクロールできません

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