☰

コンテナから溢れているフレックスアイテムの上部までスクロールできない 質問する

tag-icon • tag-icon html css flexbox
コンテナから溢れているフレックスアイテムの上部までスクロールできない 質問する

flexbox を使用して便利なモーダルを作成しようとしたところ、ブラウザの問題と思われるものを発見しました。既知の修正や回避策、または解決方法に関するアイデアがあるかどうか知りたいです。

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

ただし、垂直方向の中央揃えとスクロール バーを組み合わせると、モーダルの上部がオーバーフローし始め、アクセスできなくなる可能性があります。上記の例では、オーバーフローを強制するようにサイズを変更することができ、そうすることでモーダルの下部までスクロールできますが、上部までスクロールすることはできません (最初の段落が切り取られます)。

.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: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center; */
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}
<div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div>

これは、(現在の) Firefox、Safari、Chrome、Opera に影響します。興味深いことに、IE10 のベンダー プレフィックス付き CSS にコメントすると、IE10 でも正しく動作します。IE11 ではまだテストしていませんが、動作は IE10 と一致すると想定しています。

サンプルコードへのリンクはこちらです（非常に簡略化されています）

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

ベストアンサー1

問題

Flexbox を使用すると、中央揃えが非常に簡単になります。

align-items: centerフレックス コンテナーにと を適用するだけでjustify-content: center、フレックス アイテムが垂直方向と水平方向に中央揃えされます。

ただし、フレックス アイテムがフレックス コンテナーよりも大きい場合、この方法には問題が発生します。

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

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

justify-content: center以下は、LTR コンテナーに 3 つの flex アイテムがある例です。

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

解決策 1

この問題を解決するにはフレックスボックスの自動マージン、 の代わりにjustify-content。

マージンを使用するとauto、オーバーフローしたフレックス アイテムを、そのどの部分へのアクセスも失うことなく、垂直方向と水平方向に中央揃えにすることができます。

したがって、flex コンテナー上のこのコードの代わりに次のコードを使用します。

#flex-container {
    align-items: center;
    justify-content: center;
}

フレックスアイテムにこのコードを使用します:

.flex-item {
    margin: auto;
}

改訂版デモ

解決策 2 (Safari にはまだ実装されていません)

追加するsafe次のように、キーワード配置ルールに値を追加します。

justify-content: safe center

または

align-self: safe center

からCSS ボックス配置モジュール仕様:

4.4. オーバーフロー配置:キーワードsafeとunsafeスクロールの安全性の制限

[flex アイテム] が [flex コンテナー] より大きい場合、オーバーフローします。この状況で一部の配置モードが適用される場合、データが失われる可能性があります。たとえば、サイドバーのコンテンツが中央に配置されている場合、オーバーフローすると、ボックスの一部がビューポートの開始エッジを超えて送信され、スクロールできなくなります。

この状況を制御するために、オーバーフロー アラインメントモードを明示的に指定できます。Unsafeアラインメントは、オーバーフロー状況でデータ損失が発生する場合でも、指定されたアラインメント モードを尊重しますが、safeアラインメントは、オーバーフロー状況でデータ損失を回避するためにアラインメント モードを変更します。

デフォルトの動作では、配置対象がスクロール可能な領域内に含まれることになりますが、執筆時点ではこの安全機能はまだ実装されていません。

safe

[flex アイテム] のサイズが [flex コンテナー] からオーバーフローする場合、[flex アイテム] は配置モードが [ flex-start] であるかのように配置されます。

unsafe

[フレックス アイテム] と [フレックス コンテナー] の相対的なサイズに関係なく、指定された配置値が適用されます。

注: ボックス配置モジュールは、フレックスだけでなく、複数のボックス レイアウト モデルで使用されます。したがって、上記の仕様抜粋では、括弧内の用語は実際には「配置サブジェクト」、「配置コンテナー」、および「start」です。この特定の問題に焦点を当てるために、フレックス固有の用語を使用しました。

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

フレックスアイテムの考慮事項

Flexbox の配置プロパティは、CSS の他の中央揃え方法とは異なり、「真の」中央揃えを行います。つまり、フレックス アイテムは、フレックス コンテナーからオーバーフローした場合でも中央揃えのままになります。

ただし、ページの上端や左端を超えてオーバーフローすると、そこにコンテンツがあってもその領域までスクロールできないため、問題が発生することがあります。

将来のリリースでは、配置プロパティが拡張され、「安全」オプションも追加される予定です。

現時点では、これが懸念事項である場合は、代わりにマージンを使用して中央揃えを実現できます。マージンを使用すると、「安全な」方法で応答し、オーバーフローした場合に中央揃えが停止します。

プロパティを使用する代わりに、中央に配置したいフレックス アイテムに余白をalign-設定します。auto

プロパティの代わりにjustify-、フレックス コンテナー内の最初と最後のフレックス アイテムの外側の端に自動マージンを設定します。

余白autoは「フレックス」して残りのスペースを想定し、スペースが残っている場合はフレックス項目を中央に配置し、スペースがない場合は通常の配置に切り替えます。

ただし、複数行のフレックスボックスでマージンベースの中央揃えに置き換えようとしている場合はjustify-content、各行の最初と最後のフレックス項目にマージンを設定する必要があるため、おそらくうまくいきません。どの項目がどの行に配置されるかを事前に予測できない限り、メイン軸でマージンベースの中央揃えを使用してプロパティを置き換えることは確実ではありませんjustify-content。

おすすめ記事