要素をスクロールさせる時の高さを可変にする方法です。
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を使って親要素の高さを指定するだけで子要素の高さが決まります。
なので、スクロールしたい要素の高さを計算したりして指定する..と言った手前がなくて楽かと思います。

おまけ

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

メモ帳でプログラミング

JavaやPHPを使ってプログラムを作るさいに、パソコンにJava、PHPをインストール必要があるが
パソコンにインストールされているメモ帳を使うことで、インストールしなくてもWebページを作ることができる。

使用するのは言語はHTML
HTMLとは、Webページを作成するための言語のこと。

メモ帳にこのように書いて

ブラウザで開くと

Webページの完成

成果物

https://yuzuru.itsumen.com/

リポジトリ

https://github.com/yuzuru2/hugo_theme

UI

JavaScriptを使うと、チェックボックスの中間状態を表すのに、indeteminateプロパティを使えます。
以下のHTMLをブラウザで表示すると、チェックボックスとボタンが表示されます。ボタンを押すと、チェックボックスが中間状態になります。

<meta charset="utf-8">
<input type="checkbox" id="test" onchange="showAlert()">
<input type="button" onclick="toIndeterminate()" value="チェックを中間状態にする">
<script>
  let checkbox = document.getElementById("test");

  let showAlert = function(){window.alert("alert")};
  let toIndeterminate = function(){checkbox.indeterminate = true};
</script>

ところがどうやらIEでは、チェックを中間状態にしてから、チェックボックスをクリックしても、onchangeイベントは発生しないようです。

仕方ないので、onclickにすることで対応しました。

<meta charset="utf-8">
<input type="checkbox" id="test" onclick="showAlert()">
<input type="button" onclick="toIndeterminate()" value="チェックを中間状態にする">
<script>
  let checkbox = document.getElementById("test");

  let showAlert = function(){window.alert("alert")};
  let toIndeterminate = function(){checkbox.indeterminate = true};
</script>

100日チャレンジの285日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
285日目は、

おはようございます
285日目　2h
・昔つくったポートフォリオ改造（ほぼ書き直し）

今度は設計とかちゃんと意識して書く#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 8, 2020