Flexboxを使って要素をスクロールさせるときの高さを可変にする

要素をスクロールさせる時の高さを可変にする方法です。
Flexboxを使うことで高さを固定値で指定せず、レスポンシブ対応のレイアウトにできたのでざっくりですが方法を書いていきます。

##要素をスクロールさせたい
まずはやりたいことの基盤となるスクロールの実装を書きます。

要素のスクロール自体はこのcssでできるはず。

style.scss

.box-scroll {
  height: 80px;
  overflow: scroll;
}

しかし、これだと要素の高さをが固定値（px指定）のため、ブラウザを縮小させると要素が隠れて見えなくなります。

レスポンシブ対応（ブラウザを縮小させても要素全部が見える状態）にしたい場合は、Flexboxを使うことで高さを固定せずに要素のスクロールができます。

#Flexboxで縦並びにする
Flexboxを使って縦並びのレイアウトにする。
このとき、親要素の高さをheight: 100vh;、子要素にflex: 1;とすることで各要素の高さが均等に画面いっぱいに広がる。

index.html

<div class="flex-box">
　<div class="box">1</div>
　<div class="box">2</div>
　<div class="box">3</div>
</div>

style.scss

.flex-box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  > .box {
    flex: 1;
  }
}

装飾などのコードは省いていますが、レイアウトは下の画像のようになります。

###この仕組みを使って高さを固定せずに要素をスクロールさせる
先ほどと同じ、１画面でブラウザのスクロールをしないイメージのレイアウトです。
２つの要素があり、下の要素がスクロールできるようになっています。

See the Pen LYVoMzE by mnk (@mnk_o7) on CodePen.

Flexboxを使って親要素の高さを指定するだけで子要素の高さが決まります。
なので、スクロールしたい要素の高さを計算したりして指定する..と言った手前がなくて楽かと思います。

おまけ

実際にこの方法でコーディングする機会があり、便利だなと感じたので書いてみましたが、はじめての投稿でグダグダ、かつ説明不足な部分が多いと思います..
ほかに良さげな方法、ご指摘などあればいただけると嬉しいです。