CSSoverflow プロパティは、要素の内容が多すぎてブロック整形文脈に収まらない場合に、何をするかを指定します。これは overflow-x 及び overflow-y一括指定プロパティです。

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

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

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

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

形式文法

[ 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
適用対象Block-containers, flex containers, and grid containers
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能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,