ボックス

min-height

min-height は要素の高さの下限を決めます。中身が少ないときもその高さを保ち、中身が多ければそれより高く伸びます。height で高さを決め打ちするより、中身が増えたときに崩れにくくなります。

構文

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  height: auto;
  min-height: 12em;
}

min-height12em

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

200px などの長さ：その高さより低くしません。
auto：ふつうは下限を決めません。初期値です。grid の子要素や、縦に並べる flex（flex-direction: column）の子要素では、中身がはみ出さない高さが自動で下限になります。
min-content・max-content・fit-content：横書きの高さでは、どれも中身の高さを下限にします。

このページのプレビューでは、高さを height: auto で中身に任せた箱に min-height を足しています。中身の高さより大きな下限を決めると箱がその高さまで伸び、小さな下限なら中身の高さのままです。height と違って、中身が下限より多くなっても箱からはみ出しません。

画面いっぱいの高さの区画を作るときも、height: 100dvh より min-height: 100dvh にしておくと、中身が多いときに伸びてくれます。

50% のような % は、親の高さが決まっているときだけ効くので、このページでは選べるようにしていません。プレビューの箱の右下のつまみで高さを縮めても、min-height より低くはなりません。