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-x で、二つ目の値が overflow-y になります。それ以外の場合、 overflow-x および overflow-y は同じ値に設定されます。

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 After Firefox 3.6, the overflow property is correctly applied to table group elements (<thead>, <tbody>, <tfoot>).
IE 完全対応 4
補足
完全対応 4
補足
補足 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.
Opera 完全対応 7Safari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Multiple keyword syntax for overflow-x and overflow-y
実験的
Chrome 完全対応 68Edge 未対応 なしFirefox 完全対応 61IE 未対応 なしOpera 完全対応 55Safari 未対応 なしWebView Android 完全対応 68Chrome Android 完全対応 68Edge Mobile 未対応 なしFirefox Android 完全対応 61Opera Android 完全対応 55Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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