overflow | スタイルシートリファレンス

適用できる要素ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
継承なし
初期値visible

overflowとは?

CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。

overflowプロパティでスクロール表示したり、溢れてもそのまま表示させたり、非表示にするなど制御が行えます。

overflowで指定できる値

CSSのoverflowプロパティでは以下のキーワード値の指定が可能です。

  • visible: (初期値)溢れた部分をそのまま表示
  • hidden: 溢れた部分をパディングボックスに応じて切り取り。非表示とする。スクロール禁止。
  • clip: hiddenと同じ効果。スクロールが完全に禁止。
  • scroll: パディングボックスに応じて切り取り。ただしスクロールバーが表示されスクロールが可能。
  • auto: ブラウザに依存する。基本的に溢れる場合はスクロールバーが表示され、スクロール可能。
  • overlay: autoと同じ
またoverflowプロパティの値はカンマ区切りで複数個指定することも可能です。

構文

overflow: visible | hidden | clip | scroll | auto;

overflowを使ったサンプルコード

上記のサンプルコードでは、overflowプロパティの各キーワード値についてブラウザ上の動作を確認することが出来ます。

overflowのブラウザ対応状況

CSSのoverflowプロパティはモダンなブラウザのほぼ全てで対応しているプロパティです。overflowプロパティの各ブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。

Can I use... Support tables for HTML5, CSS3, etc