7
コンテナーがオーバーフローしているフレックスアイテムの上部にスクロールできません
したがって、フレックスボックスを使用して便利なモーダルを作成しようとしたときに、ブラウザーの問題のように見えるものが見つかり、既知の修正または回避策があるかどうか、またはそれを解決する方法についての考えがあります。 私が解決しようとしていることには、2つの側面があります。最初に、モーダルウィンドウを垂直方向に中央揃えにします。これは期待どおりに機能します。2つ目は、モーダルウィンドウをスクロールすることです-外部的に、モーダルウィンドウ全体をスクロールしますが、その中のコンテンツはスクロールしません（これにより、ドロップダウンや、モーダルの境界外に拡張できるその他のUI要素を使用できます-カスタム日付ピッカーなど） ただし、垂直方向のセンタリングとスクロールバーを組み合わせると、モーダルがオーバーフローし始めると、モーダルの上部にアクセスできなくなる可能性があります。上記の例では、オーバーフローを強制するようにサイズ変更できます。そうすることで、モーダルの一番下までスクロールできますが、一番上まではスクロールできません（最初の段落は切り取られます）。 これはサンプルコードへのリンクです（非常に簡略化されています） https://jsfiddle.net/dh9k18k0/2/ .modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; // Optional support to confirm scroll behavior makes sense in IE10 //-ms-flex-direction: …
259
html
css
flexbox
browser-bugs