高さが可変する要素の下にスクロール可能なコンテンツを設置する方法（CSSのみ）

画面の一部のみ縦スクロールを発生させる際に、「高さを固定しない方法で、画面の縦幅いっぱいにスクロールでお願いします！」という要望があり、実装する時少し時間がかかったので解決方法をまとめました。

画面の一部のみスクロールさせる方法で、調べると良くあるCSSが出てきます。

.scroll{
  height: 80px;
  overflow: auto;
}

高さをpxなどで固定するやつですね。

デザインなどで高さが指定されているものでしたら、このCSSで良いと思いますが、今回の要望に当てはまりません。

解決方法のコード

See the Pen スクロール by さえ (@sae1212) on CodePen.

flexboxを使って実現しました。

コードの解説としては以下です。

コードを一つ一つ見てみるとなるほど、と思うのですが、なかなか思いつかないのですよね…！

入れ子にする場合

入れ子にする場合は以下です。

See the Pen スクロール（入れ子ver） by さえ (@sae1212) on CodePen.

入れ子にする要素は、「親要素でもあり、子要素でもある」ということから、親要素と子要素両方のCSSをかけてあげます。

参考サイト

以下のサイトを参考にさせていただきました！