【CSS】`display: flex` × `overflow: scroll` が効かない問題

【CSS】display: flex × overflow: scroll が効かない問題の正体と解決法

はじめに

Flexbox を使ってレイアウトを組むとき、overflow: scroll を指定してもなぜかスクロールされない……という現象に遭遇したことはありませんか？

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
  overflow-y: scroll;
}

↑このように書いてもスクロールできないケースが多く、初心者にとってはとても分かりづらい落とし穴です。

本記事ではこの問題の原因と、min-height: 0 を使った明確な解決方法を具体例付きで解説します。

---

結論

状態	スクロール動作	説明
min-height: 0 なし	❌ 動かない	flex 子要素が親の高さ制限を無視してしまう
min-height: 0 あり	✅ スクロールできる	高さ制限が有効になることで overflow が効く

---

なぜ min-height: 0 が必要なのか？

Flexbox の仕様では、flex 子要素は初期状態で min-height: auto（つまり内容に応じて縮まない）になっています。
このため、overflow を効かせたい子要素が親の高さを無視して スクロールが発生しない のです。

つまり「親要素より小さくなっていいよ」という許可を出すのが min-height: 0。

---

具体例で見る解決方法

✅ 正しいパターン

<div class="container">
  <header>ヘッダー</header>
  <div class="content">長い長いコンテンツ...</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  min-height: 0;         /* ←これがないとダメ */
  overflow-y: auto;
}

このように書くと、.content に縦スクロールが発生するようになります。

---

❌ よくある間違い

.content {
  flex: 1;
  overflow-y: auto;
}

min-height: 0 を省略すると、flex の子要素は縮まらず、結果としてスクロールすべき領域が親要素のサイズを突き抜けてしまいます。
つまり、スクロールバーは表示されないまま。

---

まとめ

ポイント	内容
問題	Flexbox の子要素が overflow を無視する
原因	min-height: auto が効いて縮まない
解決法	min-height: 0 を明示的に指定する

---

おわりに

Flexbox は便利ですが、細かい仕様の罠にハマりがちです。
特にレイアウトの中でスクロールを使いたいときは、min-height: 0 を忘れずに指定しましょう。

---

関連資料

• MDN Web Docs - min-height