overflow

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

選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。

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

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

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

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

構文

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

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

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

値

visible
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
hidden
内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 offsetLeft のようなプロパティの値を設定する方法などで) スクロールすることができますので、要素はスクロールコンテナーになります。
clip
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 display: flow-root を使用して実現することができます。
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.enabled を true に設定してください。

形式文法

[ 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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
overflowChrome 完全対応 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 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android ?
Multiple keyword syntax for overflow-x and overflow-y
実験的
Chrome 完全対応 68Edge 未対応 なしFirefox 完全対応 61IE 未対応 なしOpera 完全対応 55Safari 未対応 なしWebView Android 完全対応 68Chrome Android 完全対応 68Firefox Android 完全対応 61Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

関連情報

関連トピック