min-height / max-height を理解すると「高さが安定した UI」が作れる
min-height / max-height は、ボックスモデルの中でも 高さの伸び縮みをコントロールするための重要プロパティです。
特に、カード・モーダル・チャット欄・画像・テキストブロックなど、実務で頻出する UI の安定性を大きく左右します。
CSS と Tailwind CSS の両方で、初心者でも迷わず使えるように丁寧に解説します。
min-height と max-height の基本
min-height：これ以上小さくならない“高さの下限”を決める
.box {
min-height: 200px;
}
要素が縮もうとしても 200px より小さくならない。
max-height：これ以上大きくならない“高さの上限”を決める
.box {
max-height: 300px;
}
内容が増えても 300px 以上には伸びない。
深掘り：height と min/max の優先順位
min-height > height > max-height
つまり、height を指定していても min-height が勝ちます。
例
height: 100px;
min-height: 200px;
→ 実際の高さは 200px。
よくある用途と効果
- カードが内容によって潰れないようにする（min-height）
- モーダルが画面いっぱいに広がりすぎないようにする（max-height）
- チャット欄やログを内部スクロールにする（max-height + overflow）
- 画像の縦方向の伸びすぎを防ぐ（max-height）
- レスポンシブで高さを柔軟に保つ
カードの高さを一定以上に保つ（min-height）
CSS版
.card {
min-height: 200px;
padding: 20px;
background: #fff;
border-radius: 10px;
}
HTML
<div class="card">内容が少なくても高さが揃う</div>
Tailwind版
<div class="min-h-[200px] p-5 bg-white rounded-xl">
内容が少なくても高さが揃う
</div>
カードの高さが揃うと、グリッドレイアウトが美しく整います。
モーダルの高さを画面内に収める（max-height）
CSS版
.modal {
max-height: 80vh;
overflow-y: auto;
padding: 20px;
background: white;
}
HTML
<div class="modal">長い内容が入っても画面内でスクロール</div>
Tailwind版
<div class="max-h-[80vh] overflow-y-auto p-5 bg-white">
長い内容が入っても画面内でスクロール
</div>
vh（viewport height）を使うと、画面サイズに応じて高さが変わるため、モーダルが画面からはみ出しません。
チャット欄の内部スクロール（max-height + overflow）
CSS版
.chat-box {
max-height: 300px;
overflow-y: auto;
padding: 12px;
background: #f7fafc;
}
HTML
<div class="chat-box">チャットログがここに入る</div>
Tailwind版
<div class="max-h-[300px] overflow-y-auto p-3 bg-gray-100">
チャットログがここに入る
</div>
内容が増えてもボックス自体は伸びず、内部だけスクロールします。
画像の縦方向の伸びすぎを防ぐ（max-height）
CSS版
.thumb {
max-height: 200px;
object-fit: cover;
}
Tailwind版
<img src="photo.jpg" class="max-h-[200px] object-cover">
画像が縦に伸びすぎるのを防ぎ、見た目が崩れません。
min-height / max-height の深掘りポイント
1. height を固定すると柔軟性が失われる
.box {
height: 200px;
}
内容が増えると overflow するか、はみ出して崩れます。
min-height や max-height を使うと、
「伸びるけど限界は決める」 という柔軟な設計ができます。
2. min-height は「潰れ防止」に最適
flex や grid の子要素は、内容が少ないと潰れることがあります。
.card {
min-height: 180px;
}
Tailwind
<div class="min-h-[180px]">
これだけで高さが揃い、UI が安定します。
3. max-height は「内部スクロール」とセットで使う
max-height だけだと、内容が増えたときに見えなくなります。
.box {
max-height: 300px;
overflow-y: auto;
}
Tailwind
<div class="max-h-[300px] overflow-y-auto">
この組み合わせが実務で最も使われます。
4. vh を使うと画面サイズに応じた高さが作れる
例：画面の 80% の高さ
max-height: 80vh;
Tailwind
<div class="max-h-[80vh]">
モーダル・サイドバー・メニューなどで便利。
実践例：レスポンシブな説明文ボックス
CSS版
.text-box {
min-height: 120px;
max-height: 240px;
overflow-y: auto;
padding: 16px;
background: #fff;
}
HTML
<div class="text-box">長い説明文が入る場合はスクロール</div>
Tailwind版
<div class="min-h-[120px] max-h-[240px] overflow-y-auto p-4 bg-white">
長い説明文が入る場合はスクロール
</div>
まとめ
min-height / max-height は、
高さの伸び縮みをコントロールするための重要プロパティです。
- min-height → 小さくなりすぎるのを防ぐ
- max-height → 大きくなりすぎるのを防ぐ
- height より min-height が優先される
- max-height は overflow とセットで使う
- Tailwind では min-h-* / max-h-* を使う
