TailwindCSS overflow 効かない？原因解決テクニック三選

TailwindCSS の overflow（overflow-hidden、overflow-auto）が効かない原因と解決方法を3つのテクニックで解説します。実際のコード例とNG/OKパターンで、よくある失敗を防ぎましょう。

はじめに

TailwindCSS overflow 効かない——そんな経験はありませんか？

overflow-hidden を付けたら表示したい要素まで切れてしまった、overflow-auto を付けたのにスクロールバーが出ない、overflow-scroll を付けたら常にスクロールバーが表示されてしまう…。

overflow 系のクラスは、使い方を間違えると意図しない表示になりがちです。

この記事では、overflow が効かない3つの原因と解決方法を、実際のコード例で解説します。

---

【体験談】私も overflow で苦労しました

その前に、私の体験談を紹介させてください。

私は以前、overflow でスクロールバーを付ける/付けないで苦労した経験があります。

特に「高さを指定する」という概念を最初知らなかったんです。overflow-auto を付けてもスクロールバーが思ったように出なくて、何が原因か分からず困りました。

なんとなくスクロールバーが出たからいいや、と思っていた時期もありました。でも、ユーザーさんから「一画面に収まる高さにしてほしい」と言われて、ニーズを汲み取れていなかったことに気づきました。

今となっては反省です。高さ指定の重要性を早く知っていれば…。

同じように悩んでいる方の役に立てれば嬉しいです。

---

overflow が効かない原因と解決テクニック

それでは、overflow が効かない3つの原因と解決方法を見ていきましょう。

テクニック1: overflow-hidden を付けたら子要素が切れてしまう

誤解シナリオ:

1. 読者Aさんは、カードからはみ出す要素を隠したい
2. 公式ドキュメント（https://tailwindcss.com/docs/overflow）で overflow-hidden を見つける
3. 「overflow-hidden を付ければはみ出しが隠れるはず」と親要素に適用
4. 「あれ？absolute で配置したバッジまで切れてしまった…」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="relative mx-auto max-w-xs bg-white rounded-lg p-4 overflow-hidden">
    <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">NEW</span>
    <h3 class="font-bold">商品名</h3>
    <p class="text-gray-600 text-sm">商品の説明文です</p>
  </div>
</div>

バッジの上部と右側が切れてしまいました。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="relative mx-auto max-w-xs">
    <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full z-10">NEW</span>
    <div class="bg-white rounded-lg p-4 overflow-hidden">
      <h3 class="font-bold">商品名</h3>
      <p class="text-gray-600 text-sm">商品の説明文です</p>
    </div>
  </div>
</div>

バッジを外側に出し、overflow-hidden は内側のコンテンツ部分だけに適用しました。

解説:

overflow-hidden は、その要素の境界からはみ出すすべての子要素を切り取ります。absolute で配置した要素も例外ではありません。はみ出して表示したい要素がある場合は、overflow-hidden の外側に配置する必要があります。

ポイント:

overflow-hidden を使うときは、はみ出して表示したい要素を外側に配置しましょう。

---

テクニック2: overflow-auto を付けたのにスクロールバーが出ない

誤解シナリオ:

1. 読者Bさんは、コンテンツが多いときにスクロールさせたい
2. 公式ドキュメント（https://tailwindcss.com/docs/overflow）で overflow-auto を見つける
3. 「overflow-auto を付ければスクロールできるはず」と適用
4. 「あれ？スクロールバーが出ない…」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs bg-white rounded-lg p-4 overflow-auto">
    <p>コンテンツ1</p>
    <p>コンテンツ2</p>
    <p>コンテンツ3</p>
    <p>コンテンツ4</p>
    <p>コンテンツ5</p>
    <p>コンテンツ6</p>
    <p>コンテンツ7</p>
    <p>コンテンツ8</p>
  </div>
</div>

overflow-auto を付けてもスクロールバーが出ず、全コンテンツがそのまま表示されています。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs bg-white rounded-lg p-4 overflow-auto h-48">
    <p>コンテンツ1</p>
    <p>コンテンツ2</p>
    <p>コンテンツ3</p>
    <p>コンテンツ4</p>
    <p>コンテンツ5</p>
    <p>コンテンツ6</p>
    <p>コンテンツ7</p>
    <p>コンテンツ8</p>
  </div>
</div>

h-48 で高さを制限することで、コンテンツがはみ出してスクロールバーが表示されました。

解説:

overflow-auto は「コンテンツがはみ出したときにスクロールバーを表示する」という意味です。しかし、高さを指定しないと要素はコンテンツに合わせて伸びるため、「はみ出し」が発生しません。高さ（h-*）または最大高さ（max-h-*）を指定することで、はみ出しが発生しスクロールバーが表示されます。

ポイント:

overflow-auto を使うときは、h-* や max-h-* で高さを制限しましょう。

---

テクニック3: overflow-scroll を使ったら常にスクロールバーが表示されてしまう

誤解シナリオ:

1. 読者Cさんは、コンテンツが多いときだけスクロールバーを表示したい
2. 公式ドキュメント（https://tailwindcss.com/docs/overflow）で overflow-scroll を見つける
3. 「scroll だからスクロールできるはず」と適用
4. 「あれ？コンテンツが少ないのに常にスクロールバーが表示されている…」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs bg-white rounded-lg p-4 overflow-scroll h-48">
    <p>コンテンツ1</p>
    <p>コンテンツ2</p>
  </div>
</div>

コンテンツが少ないのに、常にスクロールバーが表示されてしまっています。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs bg-white rounded-lg p-4 overflow-auto h-48">
    <p>コンテンツ1</p>
    <p>コンテンツ2</p>
  </div>
</div>

overflow-auto を使うことで、コンテンツがはみ出したときだけスクロールバーが表示されます。

解説:

overflow-scroll は「常にスクロールバーを表示」、overflow-auto は「必要なときだけスクロールバーを表示」という違いがあります。多くの場合、overflow-auto の方が自然な見た目になります。

ポイント:

必要なときだけスクロールバーを表示したい場合は、overflow-scroll ではなく overflow-auto を使いましょう。

---

まとめ

TailwindCSS overflow 効かない原因と解決方法を3つ紹介しました。

テクニック	原因	解決策
overflow-hidden で子要素が切れる	はみ出したい要素も切り取られる	要素を overflow-hidden の外側に配置
overflow-auto でスクロールバーが出ない	高さが指定されていない	h-* や max-h-* で高さを制限
overflow-scroll で常にスクロールバー	scroll は常に表示する仕様	overflow-auto に変更

overflow 系のクラスは、適用範囲と高さ指定を意識することが大切です。「どこまで切り取るか」「いつスクロールさせるか」を考えながら使うと、ハマりにくくなります。

この記事が参考になれば幸いです。また別の記事でお会いしましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）