実行できるCSSドキュメント: CSS overflow

Q: overflow の auto と scroll の違いは何ですか？

scroll は内容が収まっていても常にスクロールバーの場所を確保します。auto は内容がボックスより大きいときだけスクロールバーを表示します。普通は auto を使います。

Q: div をスクロールできるようにするには？

サイズを制限してスクロールを許可します: max-height: 300px; overflow-y: auto;。height や max-height の制限がなければ、div は内容に合わせて大きくなり、はみ出すことはありません。

Q: overflow-x: hidden で縦のスクロールバーまで出るのはなぜですか？

片方の軸が hidden、scroll、auto のとき、もう片方の軸の visible は auto として計算されるからです。代わりに overflow-x: clip を使えば、スクロールコンテナを作らず、もう片方の軸は visible のままです。

Q: はみ出した文字に省略記号 (...) を付けるには？

1 行なら、幅を制限した要素に white-space: nowrap; overflow: hidden; text-overflow: ellipsis; を指定します。複数行なら display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; を使います。

overflow の役割

内容がボックスより大きいとき (固定の高さ、長い単語、幅の広いテーブル)、内容ははみ出します。はみ出した部分をどうするかを決めるのが overflow プロパティです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

値	見え方	スクロールコンテナになるか
`visible` (初期値)	内容がボックスからあふれ、後に続くものと重なる	いいえ
`hidden`	padding の端で切り取られ、スクロールバーは出ない (スクリプトではスクロールできる)	はい
`clip`	切り取られ、スクリプトでもまったくスクロールできない	いいえ
`scroll`	内容が収まっていても常にスクロールバーを表示	はい
`auto`	内容が収まらないときだけスクロールバーを表示	はい

macOS やスマートフォンではスクロールバーが内容の上に重なって消えるので、スクロールするまで scroll と auto が同じに見えることがあります。

スクロールできるボックスを作る

ボックスがはみ出すのは、何かがそのサイズを制限しているときだけです。height か max-height に overflow-y: auto を加えると、長いリストがスクロールするパネルになります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

ここでは height より max-height が適しています。短いリストは短いままで、長いリストだけがスクロールします。内側にフォーカスできる要素がないスクロール領域には tabindex="0" を付けて、キーボードでもスクロールできるようにしましょう。

overflow-x と overflow-y

2 つの軸は別々に指定できます。よくある使い方は、幅の広いテーブルをページ全体を広げずに、コンテナの中で横スクロールさせることです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

覚えておきたいルールが 1 つあります。片方の軸が hidden、scroll、auto のとき、もう片方の軸の visible は auto になります。そのため overflow-x: hidden だけで、思わぬ縦のスクロールバーが出ることがあります。overflow-x: clip にはこの影響がありません:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

文字を省略記号で切る

text-overflow: ellipsis は、切り取られた行の末尾を「…」に置き換えます。制限された幅、折り返せない文字、隠された overflow の 3 つがそろって初めて効きます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

-webkit- 付きの line clamp は Chrome、Firefox、Safari で動きます。スクリーンリーダーは全文を読むので、切り取られた言葉が失われることはありません。

overflow の副作用

overflow を visible と clip 以外にすると、切り取り以外にも変化があります:

float と子要素の margin を内側に収めます。 要素が新しいブロック整形コンテキストを作るので、float した子要素を包むように大きくなります。display: flow-root なら何も切り取らずに同じ効果が得られます。
内側の position: sticky が効かなくなります。 sticky の子要素は一番近いスクロールコンテナに張り付きます。そのコンテナがスクロールしなければ、何も張り付きません。
absolute で配置した子要素を切り取ります (はみ出す要素がその子の包含ブロックでもある場合)。ドロップダウンやツールチップも含まれ、子要素の box-shadow も切り取られます。

スクロールバーを隠す

scrollbar-width: none を使うと、スクロールできるままスクロールバーを隠せます。使いすぎに注意しましょう。スクロールバーがないと、続きがあることに気づかない読者が多いからです。scrollbar-gutter: stable は逆の役割で、スクロールバーの場所を確保して、スクロールバーが出たときに内容がずれないようにします。

よくある間違い

サイズの制限なしにはみ出すと思う。 height も max-height もないボックスは、はみ出さずに大きくなります。
横スクロールを「直す」ために body に overflow: hidden を付ける。 代わりに幅が広すぎる要素を探しましょう (固定の width、長い URL、スクロールバーがあるときの 100vw がよくある原因です)。
white-space: nowrap なしの省略記号。 文字が折り返されるので横にはみ出さず、省略記号は出ません。
overflow-x: hidden で縦のスクロールバーが出る。 clip を使いましょう。
ドロップダウンがカードで切れる。 カードの overflow: hidden が切り取っています。overflow の指定を移すか、ドロップダウンを外側に描画しましょう。

よくある質問

overflow: hidden は何をしますか？

要素の padding ボックスに収まらない内容を、スクロールバーなしで切り取ります。隠れた部分も、スクリプトや内側の要素へのフォーカスでスクロールして表示されることはあります。

overflow の auto と scroll の違いは何ですか？

scroll は内容が収まっていても常にスクロールバーの場所を確保します。auto は内容がボックスより大きいときだけスクロールバーを表示します。普通は auto を使います。

div をスクロールできるようにするには？

サイズを制限してスクロールを許可します: max-height: 300px; overflow-y: auto;。height や max-height の制限がなければ、div は内容に合わせて大きくなり、はみ出すことはありません。

overflow-x: hidden で縦のスクロールバーまで出るのはなぜですか？

片方の軸が hidden、scroll、auto のとき、もう片方の軸の visible は auto として計算されるからです。代わりに overflow-x: clip を使えば、スクロールコンテナを作らず、もう片方の軸は visible のままです。

はみ出した文字に省略記号 (...) を付けるには？

1 行なら、幅を制限した要素に white-space: nowrap; overflow: hidden; text-overflow: ellipsis; を指定します。複数行なら display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; を使います。