[解決済み】コンテンツが溢れたフレックスボックスをスクロールさせる

質問

以下はそのコードです。 上記のレイアウトを実現するために使っているのが

.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 領域のコンテンツがオーバーフローすると、ページ全体がスクロールしてしまいます。私は、コンテンツエリアそのものをスクロールさせたいので を追加しました。 overflow: auto に content ディブ .

今の問題点は、カラム自体が親の高さからはみ出さないので、そこでもボーダーが切れてしまうことです。

以下は、スクロールの問題を示すペンです。 .

を設定するにはどうすればよいのでしょうか？ content エリアを独立してスクロールさせながら、その子エリアが content ボックスの高さ？

解決方法は？

私は、次のように話しています。 タブアトキンス (フレックスボックス仕様の作者) がこの件に関して、私たちはこのように考えています。

HTMLです。

<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>

CSSです。

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

.box {
    display: flex;
    min-height: min-content; /* needs vendor prefixes */
}

以下はペンです。

1. ショートカラムの引き伸ばし中 .
2. 長い列のはみ出しとスクロール .

これがうまくいくのは align-items: stretch は、アイテムに固有の高さがある場合は縮小しない。 min-content .