CSS Tips | 超実務コアCSSテクニック：ボックスモデル － overflow-x / y分離

overflow-x / overflow-y を分離してコントロールすると「横だけスクロール」「縦だけ切り取り」が自在になる

overflow は「要素の中身がはみ出したときの扱い」を決めますが、
overflow-x（横方向） と overflow-y（縦方向） を分離して使うと、
UI の細かい制御ができるようになります。

特に、横スクロールのギャラリー、縦スクロールのチャット欄、
縦は切り取り・横はスクロールなど、実務でよく使うパターンが多いです。

CSS と Tailwind CSS の両方で、初心者でも理解しやすいように解説します。

overflow-x / overflow-y の基本挙動

横方向（overflow-x）

• 横方向のはみ出しをどう扱うか
• scroll / auto を指定すると横スクロールが発生

縦方向（overflow-y）

• 縦方向のはみ出しをどう扱うか
• scroll / auto を指定すると縦スクロールが発生

分離するメリット

• 横だけスクロールさせたい
• 縦だけ切り取りたい
• スクロールバーを片方だけ出したい
• レイアウト崩れを防ぎたい

横スクロールだけ許可する（overflow-x: auto）

CSS

.gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}

.gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}

HTML

<div class="gallery">
  <img src="img1.jpg" class="thumb">
  <img src="img2.jpg" class="thumb">
  <img src="img3.jpg" class="thumb">
</div>

<div class="gallery">
  <img src="img1.jpg" class="thumb">
  <img src="img2.jpg" class="thumb">
  <img src="img3.jpg" class="thumb">
</div>

Tailwind

<div class="flex gap-3 overflow-x-auto overflow-y-hidden pb-2">
  <img src="img1.jpg" class="w-40 h-40 object-cover">
  <img src="img2.jpg" class="w-40 h-40 object-cover">
  <img src="img3.jpg" class="w-40 h-40 object-cover">
</div>

<div class="flex gap-3 overflow-x-auto overflow-y-hidden pb-2">
  <img src="img1.jpg" class="w-40 h-40 object-cover">
  <img src="img2.jpg" class="w-40 h-40 object-cover">
  <img src="img3.jpg" class="w-40 h-40 object-cover">
</div>

横スクロールのギャラリーは実務で非常に多い UI です。

縦スクロールだけ許可する（overflow-y: auto）

CSS

.chat-box {
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  background: #f7fafc;
}

.chat-box {
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  background: #f7fafc;
}

HTML

<div class="chat-box">
  長いチャットログがここに入る…
</div>

<div class="chat-box">
  長いチャットログがここに入る…
</div>

Tailwind

<div class="h-52 overflow-y-auto overflow-x-hidden p-3 bg-gray-100">
  長いチャットログがここに入る…
</div>

<div class="h-52 overflow-y-auto overflow-x-hidden p-3 bg-gray-100">
  長いチャットログがここに入る…
</div>

チャット欄・ログ表示・コードブロックなどでよく使います。

縦は切り取り、横はスクロール（overflow-y: hidden + overflow-x: auto）

CSS

.table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

.table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

HTML

<div class="table-wrapper">
  <table>…</table>
</div>

<div class="table-wrapper">
  <table>…</table>
</div>

Tailwind

<div class="overflow-x-auto overflow-y-hidden">
  <table class="min-w-max">…</table>
</div>

<div class="overflow-x-auto overflow-y-hidden">
  <table class="min-w-max">…</table>
</div>

横に長い表（table）をスマホで見るときの定番パターンです。

overflow-x / y を分離することで解決できる問題（深掘り）

1. スクロールバーが両方向に出る問題を防げる

デフォルトの overflow: auto だと、
横にも縦にもスクロールバーが出ることがあります。

overflow-x / y を分けることで、
必要な方向だけスクロールさせられます。

2. レイアウト崩れを防げる

横スクロールのギャラリーで縦方向に余計なスクロールバーが出ると、
高さがズレて UI が崩れます。

overflow-y: hidden を組み合わせることで安定します。

3. margin 相殺を防ぐ効果もある

overflow が auto / hidden / scroll の場合、
親と子の margin が相殺されなくなるという重要な性質があります。

縦方向だけ overflow-y: auto を使うと、
margin 相殺を防ぎつつ縦スクロールを作れます。

4. 画像のトリミングとスクロールを両立できる

overflow-y: hidden + overflow-x: auto
を使うと、縦は切り取り、横はスクロールという UI が作れます。

実践例：横スクロールのタグリスト

CSS版

.tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
}

.tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
}

Tailwind版

<div class="flex gap-2 overflow-x-auto overflow-y-hidden py-2">
  <span class="px-3 py-1 bg-blue-100 rounded">タグ1</span>
  <span class="px-3 py-1 bg-blue-100 rounded">タグ2</span>
  <span class="px-3 py-1 bg-blue-100 rounded">タグ3</span>
</div>

<div class="flex gap-2 overflow-x-auto overflow-y-hidden py-2">
  <span class="px-3 py-1 bg-blue-100 rounded">タグ1</span>
  <span class="px-3 py-1 bg-blue-100 rounded">タグ2</span>
  <span class="px-3 py-1 bg-blue-100 rounded">タグ3</span>
</div>

スマホ UI でよく見る「横に流れるタグリスト」が簡単に作れます。

実践例：縦スクロールのカード内コンテンツ

CSS版

.card {
  height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: #fff;
}

.card {
  height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: #fff;
}

Tailwind版

<div class="h-44 overflow-y-auto overflow-x-hidden p-4 bg-white">
  長い説明文がここに入る…
</div>

<div class="h-44 overflow-y-auto overflow-x-hidden p-4 bg-white">
  長い説明文がここに入る…
</div>

まとめ

overflow-x / overflow-y を分離すると、
スクロールやトリミングを細かく制御できるようになります。

• 横スクロール → overflow-x: auto
• 縦スクロール → overflow-y: auto
• 縦は切り取り → overflow-y: hidden
• 横は切り取り → overflow-x: hidden
• Tailwind では overflow-x-* / overflow-y-* を使う
• margin 相殺を防ぐ効果もある