CSS レイアウト - Overflow

CSS overflow プロパティは、コンテンツが要素のボックスからあふれたときの表示方法を制御します。

このテキストコンテンツはスクロールできます。スクロールバーの方向は垂直方向です。

CSS Overflow

CSS overflow プロパティは、コンテンツが要素のボックスにあふれたときに、対応する要素の領域内にスクロールバーを追加できます。

overflow プロパティには次の値があります：

值	説明
visible	デフォルト値。コンテンツは切り取られず、要素のボックスの外に表示されます。
hidden	コンテンツは切り取られ、残りのコンテンツは表示されません。
scroll	コンテンツは切り取られますが、ブラウザは残りのコンテンツを表示するためのスクロールバーを表示します。
auto	コンテンツが切り取られた場合、ブラウザは残りのコンテンツを表示するためのスクロールバーを表示します。
inherit	overflow プロパティの値を親要素から継承することを指定します。

注意:overflow プロパティは、高さが指定されたブロック要素にのみ機能します。

注意:OS X Lion（Mac システム）では、スクロールバーはデフォルトで非表示で、使用時にのみ表示されます（"overflow:scroll" を設定しても同様です）。

デフォルトでは、overflow の値は visible であり、コンテンツが要素のボックスからあふれることを意味します：

このテキストコンテンツは要素のボックスからあふれます。

div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }

その他の拡張