「オーバーフロー コンテナーのフレックス項目の先頭までスクロールできません」のタイトルは次のように書き換えられます:「オーバーフロー コンテナーのフレックス項目の先頭までスクロールできません」

Question

フレックスボックスを使用して便利なモーダルを作成しようとしているときに、ブラウザの問題と思われる問題に遭遇し、既知の修正または回避策があるかどうか、または修正方法についてのアイデアがあるかどうか疑問に思っていました。

私が解決しようとしている問題には 2 つの側面があります。まず、モーダル ウィンドウを垂直方向に中央揃えにすることは期待どおりに機能します。 2 つ目は、モーダル ウィンドウをスクロール (外部スクロール) することで、モーダル ウィンドウ内のコンテンツではなく、モーダル ウィンドウ全体がスクロールします (これにより、カスタム ウィンドウのように、モーダルの範囲を超えて拡張できるドロップダウン メニューやその他の UI 要素を使用できます)日付ピッカーは待ちます)。

ただし、垂直方向のセンタリングをスクロールバーと組み合わせて使用​​すると、モーダルの上部がオーバーフローし始めてアクセスできなくなる可能性があります。上の例では、サイズを変更して強制的にオーバーフローさせることができます。その際、モーダルの下部まではスクロールできますが、上部まではスクロールできません（最初の段落が切り取られています）。

.modal-container {
  位置: 固定;
  トップ: 0;
  左: 0;
  下: 0;
  右: 0;
  背景: rgba(0, 0, 0, 0.5);
  オーバーフロー-x: 自動;
}
.modal-container .modal-window {
  表示: -ms-flexbox;
  ディスプレイ: フレックス;
  フレックス方向: 列;
  整列項目: 中央;
  コンテンツの位置揃え: 中央;
  /* IE10 でのスクロール動作が意味があることを確認するためのオプションのサポート
  //-ms-flex-direction: 列;
  //-ms-flex-align: センター;
  //-ms-flex-pack: センター; */
  高さ: 100%;
}
.modal-container .modal-window .modal-content {
  境界線: 1px 実線 #ccc;
  境界半径: 4px;
  背景: #fff;
  幅: 100%;
  最大幅: 500ピクセル;
  パディング: 10px
}

<div class="modal-container">
    <div class="モーダルウィンドウ">
        <div class="モーダルコンテンツ">
            <p class="p3">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。 1960 年代に、Lorem Ipsum の一節を含む Letraset シートのリリースによって普及し、さらに最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。</p>
            <p class="p3">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。 1960 年代に、Lorem Ipsum の一節を含む Letraset シートのリリースによって普及し、さらに最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。</p>
            <p class="p3">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。 1960 年代に、Lorem Ipsum の一節を含む Letraset シートのリリースによって普及し、さらに最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。</p>
        </div>
    </div>
</div>

これは (現在の) Firefox、Safari、Chrome、Opera に影響します。興味深いことに、IE10 では、IE10 プロバイダーの以前の CSS を削除した場合、その動作は確実です - IE11 にはありません

テストを行っていますが、IE10 に合わせて実行されています。

これは例示的なコードの接続（高度化）です

https://jsfiddle.net/dh9k18k0/2/

Answer 1

この効果を実現するために使用したコンテナは 3 つだけです。秘訣は、スクロールを制御するコンテナからフレックスボックス コンテナを分離することです。最後に、すべてをルート コンテナに配置して中央に配置します。効果を作成するために必要な主なスタイルは次のとおりです:

リーリー リーリー

ここでデモを作成しました: https://jsfiddle.net/r5jxtgba/14/

Answer 2

＃＃＃質問＃＃＃

Flexbox を使用すると、センタリングが非常に簡単になります。

align-items: center

と justify-content: center をフレックス コンテナに適用するだけで、フレックス アイテムが垂直方向と水平方向の中央に配置されます。 ただし、フレックス項目がフレックスコンテナよりも大きい場合、このアプローチには問題があります。

質問で指摘されているように、フレックス項目がコンテナからオーバーフローすると、上部にアクセスできなくなります。

水平オーバーフローの場合、左側の部分 (RTL 言語では右側の部分) にアクセスできなくなります。

これは、

justify-content: center

と 3 つのフレックス項目を含む LTR コンテナの例です:

この動作の説明については、この回答の最後を参照してください。

解決策 #1

---

この問題を解決するには、

justify-content

の代わりに flexbox auto-margins を使用します。

auto

マージンを使用すると、オーバーフローしたフレックス項目を、どの部分にもアクセスできなくなることなく、垂直方向と水平方向の中央に配置できます。 したがって、フレックス コンテナーではこのコードを使用しないでください:

リーリー

フレックス項目でこのコードを使用します:

リーリー

改訂されたデモ

解決策 #2 (ほとんどのブラウザではまだ実装されていません)

---

次のように、キーワード配置ルールに

safe

値を追加します: リーリー ＃＃＃または＃＃＃ リーリー

CSS ボックス配置モジュール仕様より

:

注: ボックス配置モジュールは、フレックスだけでなく、複数のボックス レイアウト モデルで動作します。したがって、上記の仕様の抜粋では、角括弧内の用語は実際には「アライメント本体」、「アライメント コンテナ」、および「start

」です。この特定の問題に焦点を当て続けるために、フレックス固有の用語を使用しています。

MDN からのスクロール制限の説明: