☰

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

tag-icon • tag-icon css layout multiple-columns flexbox
オーバーフローしたコンテンツを含むフレックスボックスのスクロール 質問する

ここに画像の説明を入力してください

コードはこちら上記のレイアウトを実現するために以下を使用しています:

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

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

.column {
  padding: 20px;
  border-right: 1px solid #999;
}
<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
    </div>
  </div>
</div>

スタイリングに使用したコードは省略しました。すべては以下で確認できます。ペン。

上記は動作しますが、contentエリアのコンテンツがオーバーフローすると、ページ全体がスクロールしてしまいます。コンテンツエリア自体のみをスクロールさせたいので、divoverflow: autoに追加しましたcontent。

ここで問題となるのは、列自体が親の高さを超えて拡張されないため、境界線もそこで切り取られてしまうことです。

スクロールの問題を示すペンはこちら。

子要素がボックスの高さcontentを超えて拡張されたまま、領域が独立してスクロールするように設定するにはどうすればよいですか?content

ベストアンサー1

私は話したタブ・アトキンス(flexbox 仕様の著者) とこれについて話し合い、次のような結論に至りました。

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

.box {
    display: flex;
    min-height: min-content; /* needs vendor prefixes */
}
<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>

ペンは次のとおりです:

  1. 短い柱が伸びている。
  2. 長い列が溢れてスクロールする。

これが機能する理由は、align-items: stretchアイテムに固有の高さがある場合、 はアイテムを縮小しないからです。これは、ここでは によって実現されていますmin-content。

おすすめ記事