CSSのoverflowではみ出したコンテンツの表示方法を制御する

要素の中身がボックスの幅や高さを超えたとき、はみ出した部分をどう扱うかを決めるのが overflow プロパティだ。スクロールバーの表示・非表示や、はみ出し部分の切り取りを制御できる。

4 つの値

overflow には主に 4 つの値がある。

実際の表示を確認する

overflow: hidden と overflow: auto の違いを確認してみよう。

<div class="demo">
  <div class="box hidden-box">
    <p><strong>overflow: hidden</strong></p>
    <p>この文章ははみ出すと切り取られます。長いテキストを入れても、ボックスの外には表示されません。スクロールもできません。</p>
  </div>
  <div class="box auto-box">
    <p><strong>overflow: auto</strong></p>
    <p>この文章ははみ出すとスクロールバーが出ます。長いテキストを入れると、スクロールして全体を読むことができます。</p>
  </div>
</div>

.demo {
  display: flex;
  gap: 16px;
}
.box {
  width: 180px;
  height: 100px;
  border: 2px solid #6366f1;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
}
.hidden-box {
  overflow: hidden;
}
.auto-box {
  overflow: auto;
}

左側の hidden は内容が途切れて読めなくなっているのに対し、右側の auto はスクロールで全文を確認できる。

overflow-x と overflow-y

overflow は横方向（x）と縦方向（y）を個別に指定することもできる。横スクロールだけ許可してコードブロックを表示したいときや、縦スクロールだけ有効にしたいときに便利だ。

.code-block {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

この設定では、横に長いコードはスクロールで確認できるが、縦方向のはみ出しは切り取られる。

overflow: hidden の活用パターン

hidden は単にコンテンツを隠すだけでなく、レイアウトのテクニックとしても使われる。

.card {
  border-radius: 12px;
  overflow: hidden;
}
.card img {
  width: 100%;
  display: block;
}

overflow: hidden がないと、画像が border-radius の角を突き抜けて表示されてしまう。

text-overflow との組み合わせ

テキストが長すぎるときに末尾を「…」で省略する表現は、overflow と text-overflow の組み合わせで実現する。

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

この 3 つのプロパティはセットで使うのが定石だ。overflow: hidden でテキストを切り取り、white-space: nowrap で改行を禁止し、text-overflow: ellipsis で省略記号を表示する。1 つでも欠けると期待通りに動作しない。

sticky との関係

overflow と position: sticky の組み合わせには注意が必要だ。親要素に overflow: hidden や overflow: auto が設定されていると、sticky が正常に機能しなくなることがある。sticky を使う場合は、その祖先要素に overflow の指定がないか確認しておくのがトラブルを避けるコツになる。