CSSoverflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを指定します。これは overflow-x および overflow-y一括指定プロパティです。

オプションとしてはクリッピング、スクロールバーの表示、コンテナーの外側にはみ出して表示があります。

値を (既定値の) visible 以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。

overflow の効果を得るには、ブロックレベルコンテナーに高さ (height 又は max-height) を設定するか、 white-spacenowrap に設定することが必要です。

メモ: 一方の軸をvisible (既定値) に設定して、もう一方を他の値に設定すると、 visibleauto として動作する結果になります。

メモ: JavaScript の Element.scrollTop プロパティは、 overflowhidden に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。

構文

/* キーワード値 */
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* グローバル値 */
overflow: inherit;
overflow: initial;
overflow: unset;

overflow プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が overflow-y で、二つ目の値が overflow-x になります。それ以外の場合、 overflow-x および overflow-y は同じ値に設定されます。

メモ: Firefox 63 より前では、これらの値は逆であり、最初の値が overflow-x に、二番目の値が overflow-y に適用されていました。 Firefox 63 は、この順序を仕様書の変更に合うよう更新しました。この変更は新しい論理プロパティである overflow-block および overflow-inline が使用される時の順序に合わせたものです。

visible
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
hidden
内容は、必要に応じてパディングボックスに合わせてクリッピングされます。スクロールバーは表示されません。
scroll
内容は、必要に応じてパディングボックスに合わせてクリッピングされます。ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを表示します。 (これはコンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐためです。) プリンターはあふれた部分の内容を印刷する可能性があります。
auto
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。
overlay
auto と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。

Mozilla 拡張

-moz-scrollbars-none [1]
代わりに overflow:hidden を使ってください。
-moz-scrollbars-horizontal [1]
overflow-x および overflow-y を使用してください。
-moz-scrollbars-vertical [1]
overflow-x および overflow-y を使用してください
-moz-hidden-unscrollable
内部使用、テーマ向けです。 XML のルート要素と <html><body> が、矢印キーとマウスホイールでスクロールすることを禁止します。

[1] Firefox 63 において、この機能は機能設定に隠されています。 about:config の中で layout.css.overflow.moz-scrollbars.enabledtrue に設定してください。

形式文法

[ visible | hidden | clip | scroll | auto ]{1,2}

p {
  width: 12em;
  height: 6em;
  border: dotted;
  overflow: visible; /* content is not clipped */ 
}

visible (既定)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* スクロールバー表示なし */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* 常にスクロールバーを表示 */ }

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* 必要に応じてスクロールバーを追加 */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

仕様書

仕様書 状態 備考
CSS Overflow Module Level 3
overflow の定義
草案

キーワードを一つだけではなく一つまたは二つで利用できるように構文を変更

CSS Basic Box Model
overflow の定義
草案 変更なし
CSS Level 2 (Revision 1)
overflow の定義
勧告 初回定義

初期値visible
適用対象ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112114271
Multiple keyword syntax for overflow-x and overflow-y68 なし61 なし55 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり4 ? ? ?
Multiple keyword syntax for overflow-x and overflow-y6868 なし6155 なし なし

1. After Firefox 3.6, the overflow property is correctly applied to table group elements (<thead>, <tbody>, <tfoot>).

2. From version 4 to 6, Internet Explorer enlarges an element with overflow: visible (default value) to fit the content inside it. height and width behave like min-height and min-width, respectively.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, Sheppy, ethertank, sosleepy
最終更新者: mfuji09,