heightとmin-heightは何が違う？文章が増えた箱の高さを作例で比べよう

短い文章ではきれいだったカードが、説明を増やすとはみ出した。高さを決めることと、最低限の高さだけを決めることを比べてみよう。

このページでは同じ文章を二つの箱へ入れ、heightとmin-heightの違いを見る。ブラウザの作例だけで試せるので、実際のページを編集する必要はないよ。

固定した高さと、下限の高さ

heightは高さを指定し、min-heightは高さの下限を指定する。今回の作例では、同じ箱の計算方法で90pxを設定して比べる。

.fixed {
  height: 90px;
  overflow: auto;
}
.minimum {
  min-height: 90px;
}

文字が増えたとき、前者は指定した高さの中で内容を表示し、後者は必要に応じて高くなれる。min-heightを指定しただけで上限まで固定されるわけではないよ。

まず短い文章を入れる

作例の最初は、どちらも短い文章。内容が90pxより小さいので、箱は同じ高さになる。

ここではbox-sizing:border-boxを使い、余白と枠も含めた大きさをそろえている。高さの値だけを見て、余白や枠の計算方法が違う箱と比べないようにしよう。

長い文章へ切り替える

1. 「文章を長くする」を有効にする。
2. heightの箱が90pxのままかを見る。
3. その箱の中でスクロールし、続きが残っていることを確認する。
4. min-heightの箱は、内容に合わせて高くなるかを見る。
5. リセットで短い文章と最初の位置へ戻す。

編集部では、短文で両方が90px、長文で固定側は90pxのまま、最小高さ側はそれ以上へ広がることをブラウザで確認した。枠の幅によって、文章の折り返しや伸びる量は変わるよ。

heightだけで、文字が切れるわけではない

指定した高さを超えた内容の扱いには、overflowなども関わる。今回の固定側では、見えなくするのではなく、枠内をスクロールできるautoを選んでいる。

overflow:hiddenを組み合わせると、続きへ到達できない見た目になる場合もある。文章を収めたいだけなら、内容を隠す前に、高さを固定する必要があるかを考えてみよう。

最小高さだけで全部が収まる？

max-heightなど別の条件があれば、単純に伸び続ける例と違う結果になる。中の画像や、長い文字列の幅も別の確認が必要だよ。

文字を拡大した場合、翻訳で文章が長くなった場合、エラーメッセージが出た場合なども試したいね。設計時の短いサンプルだけで高さを決めないことが大切。

同じ高さに見せたい理由も考える

一覧の見た目をそろえる目的なら、GridやFlexboxの配置、文章の量、補足の出し方なども選択肢になる。すべての箱へ同じ固定高を入れて、読めない部分を増やさないようにしよう。

箱の計算はbox-sizing、文字の拡大はブラウザのズーム確認へ。

参照した公式資料

• MDN：min-height

確認日：2026年10月26日。