子要素のオーバーフローを許可しながら、Flexbox コンテンツ領域を独立してスクロールさせる方法

オーバーフローしたコンテンツを含むフレックスボックスのスクロール

問題:

次のレイアウトを考えてみましょう:

【画像レイアウト]

コンテンツ領域がオーバーフローすると、コンテンツ領域自体ではなくページ全体がスクロールします。コンテンツ div に overflow: auto を適用すると、この問題は解決しますが、列の境界線が切れてしまいます。

質問:

コンテンツ領域をどのように表示できますか?独立してスクロールするように設定し、その子がコンテンツ ボックスの範囲を超えて拡張できるようにする高さ?

答え:

フレックスボックス仕様の作成者である Tab Atkins によると、次のアプローチが使用できます:

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

ボックス div で min-height を min-content に設定すると、列がコンテンツ ボックスの範囲を超えて拡張されます。コンテンツ領域を独立してスクロールできるようにしながら、高さを調整します。互換性のためにベンダープレフィックスが必要になる場合があります。

以上が子要素のオーバーフローを許可しながら、Flexbox コンテンツ領域を独立してスクロールさせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。