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 これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
auto と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。

Mozilla 拡張

-moz-scrollbars-none これは廃止された API であり、動作は保証されていません。 [1]
代わりに overflow:hidden を使ってください。
-moz-scrollbars-horizontal これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。 [1]
overflow-x および overflow-y を使用してください。
-moz-scrollbars-vertical これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。 [1]
overflow-x および overflow-y を使用してください
-moz-hidden-unscrollable この API は標準化されていません。
内部使用、テーマ向けです。 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
適用対象ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
継承なし
計算値一括指定の次の各プロパティとして
  • overflow-x: 指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible/clip はそれぞれ auto/hidden と計算される
  • overflow-y: 指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible/clip はそれぞれ auto/hidden と計算される
アニメーションの種類離散値

ブラウザーの対応

BCD tables only load in the browser

関連情報