最終更新日 2021年6月15日

overflowプロパティ

overflowは、overflow-xとoverflow-yの値をまとめて指定するためのプロパティであり、値を2つまで指定できます。

値を1個指定した場合は、overflow-xとoverflow-yの両方とも同じ値が適用されます。

値を2個指定した場合、1個目はoverflow-x、2個目はoverflow-yの値となります。

CSS3での変更点

・overflowは、CSS3から新しく追加された「overflow-x」と「overflow-y」のショートハンドプロパティという位置づけになり、値を2つまで指定できるようになりました。

初期値	適用先	継承
各プロパティの初期値	ブロックレベル要素内容が置換されない「display:inline-block」の要素	なし

値	説明
visible	ボックスからはみ出して表示されます。（初期値）
hidden	溢れた部分を表示しません。
scroll	溢れた部分は、スクロールして見られるようになります。
auto	ブラウザの設定に依存します。通常はスクロールバーが表示されます。

サンプルコード

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: visible visible;
overflow: hidden hidden;
overflow: scroll scroll;
overflow: auto auto;

参考文献：CSS basic box model

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。