overflow:scrollを適用した要素の高さに背景の高さも合わせたい

現在デザイン・コーディングについて学んでいます。
overflow:scrollを使って要素の数が多い(はみ出す)場合は、スクロールするようにしています。
codePen
↑こちらにコードあります

実現したいことは以下です。
水色背景はウインドウの高さと同じという前提で、
①ピンクの高さが水色をはみ出す場合は要素内スクロールができるようにし、ピンクも水色と同じ高さにする。（参考①）
②ピンクの高さが水色をはみ出さない場合は要素内スクロールにならず、また水色の高さもピンクと同じ高さにしたいです。（参考②）
①と②を両立させるにはどのようにするといいでしょうか？つまり常に
参考①

参考②

現在上のcodePen上では①の状態はできているのですが、要素内スクロールを適用させるために高さを設定する必要があるのか、どうしても固定値を設定しないと要素内スクロールが適用できなかったです。

そのため②のTESTの高さに応じて、ピンク部分の高さを調節できないです。

上記の①と②が両立できる方法がわかる方いらっしゃいましたら教えて頂けますと幸いです。
よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

max-heightを使ってみてください

結論から言うと、おそらくこういう感じだと思います。（CSSは同じです）
①要素が多い場合はウインドウの高さをmaxとして、要素内スクロールが出る
https://codepen.io/mattari-panda/pen/QWKzoKq

②要素が少ない場合は、要素内スクロールも出ずに、高さがフィットする
https://codepen.io/mattari-panda/pen/ExgGMPG

※上記の例はreset.cssなど設定していないので、bodyなどのマージンも出ています。

■考え方
まず、heightの初期値はautoなので、heightに何も設定しなければ中の要素に応じた高さになります。
かつウインドウの高さ（ここでは100vh）を最大高さ（max-height）に設定し、overflow: auto;にしておけば中の要素がウインドウの高さを超える場合は、自動的にスクロールするようになるというわけです。

ポイントは、
・heightの初期のautoのときの挙動を理解する
・max-heightで高さの最大値を固定する
・overflow:auto;ではみ出たときのみスクロールさせる
の３点です。

投稿2021/01/17 02:59