CSS

Cascading Style Sheets overflow property.

overflow

　overflowプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

　overflowプロパティは、左右・上下のオーバーフローについてまとめて指定することのできるショートハンドプロパティ（短縮形）です。 キーワードを半角スペースで区切って記述することで、overflow-xプロパティと overflow-yプロパティの値をまとめて指定できます。

　キーワードを１つだけ記述した場合、overflow-x と overflow-y の値となります。キーワードを半角スペース区切りで２つ記述した場合、１番目が overflow-x、２番目が overflow-y の値となります。

値

visible

内容がボックスに収まらない場合、ボックスからはみ出して表示される。（初期値）

hidden

内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない。

clip

hiddenと同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。clipと hiddenの違いは、clipキーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、display:flow-root; を使用して実現することができます。

scroll

内容がボックスに収まらない場合、収まらない部分はボックスからはみ出さない。内容が収まらない場合には、スクロールバーなどが表示される。

auto

ボックスに収まらない内容をどう表示するかは、ユーザーエージェントに依存する。内容が収まらない場合には、スクロールバーなどが表示される。

初期値・適用対象・値の継承

初期値

visible

適用対象

置換されていないブロックレベル要素、および、置換されていないインラインブロック要素。

値の継承

しない

Sample