Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

overflow

overflow は CSS の一括指定プロパティで、コンテンツが要素のパディングボックスに収まらない（はみ出す）場合に、水平方向および垂直方向の望ましい動作を設定します。

オーバーフローショートハンド

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
overflow
1
12
1
1
18
1
その他
css.properties.overflow-x

overflow-x は CSS のプロパティで、ブロックレベル要素のコンテンツが左右の端からあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。このプロパティは、overflow 一括指定プロパティを使用して設定することもできます。
1
12
3.5
3
18
1
CSS プロパティ
auto
1
12
3.5
3
18
2
hidden
1
12
3.5
3
18
2
scroll
1
12
3.5
3
18
2
visible
1
12
3.5
3
18
2
その他
css.properties.overflow-y

overflow-y は CSS のプロパティで、ブロックレベル要素のコンテンツが上下の端からあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。このプロパティは、overflow 一括指定プロパティを使用して設定することもできます。
1
12
3.5
3
18
1
CSS プロパティ
auto
1
12
3.5
3
18
2
hidden
1
12
3.5
3
18
2
scroll
1
12
3.5
3
18
2
visible
1
12
3.5
3
18
2
auto
1
12
1
3
18
2
hidden
1
12
1
3
18
2
multiple keywords

`overflow-x` および `overflow-y` の複数のキーワード構文
68
79
61
13.1
68
13.4
scroll
1
12
1
3
18
2
visible
1
12
1
3
18
2
その他
css.types.overflow

enumerated値型は、overflow-block、overflow-inline、overflow-x、overflow-y の個別指定プロパティと overflow 一括指定プロパティのキーワード値を表します。これらのプロパティは、ブロックコンテナー、フレックスコンテナー、グリッドコンテナーに適用されます。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 3.6 以降では、`overflow` プロパティがテーブル グループ要素 (`<thead>`、`<tbody>`、`<tfoot>`) に正しく適用されます。
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (15)
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (112)
注釈 2件
対応条件
  • 以前は別名で対応していました: overlay (6)
実装メモ
  • Safari 12.1 より前では、「オーバーレイ」は macOS 上の従来のスクロールバーにのみ影響を与えていました。 Safari 12.1 以降、「auto」として解析されます。
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (100)
注釈 2件
対応条件
  • 以前は別名で対応していました: overlay (6)
実装メモ
  • iOS 12.1 の Safari より前は、「オーバーレイ」は macOS の従来のスクロールバーにのみ影響していました。 iOS 12.1 の Safari 以降、「auto」として解析されます。
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (15)
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (112)
注釈 2件
対応条件
  • 以前は別名で対応していました: overlay (6)
実装メモ
  • Safari 12.1 より前では、「オーバーレイ」は macOS 上の従来のスクロールバーにのみ影響を与えていました。 Safari 12.1 以降、「auto」として解析されます。
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (100)
注釈 2件
対応条件
  • 以前は別名で対応していました: overlay (6)
実装メモ
  • iOS 12.1 の Safari より前は、「オーバーレイ」は macOS の従来のスクロールバーにのみ影響していました。 iOS 12.1 の Safari 以降、「auto」として解析されます。
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (114)
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (112)
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (12)
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (114)
注釈 1件
対応条件
  • 以前は別名で対応していました: overlay (12)

基本構文

CSS 
.scroll-box {
  overflow: auto;
}
.hidden-box {
  overflow: hidden;
}

ライブデモ

overflow: auto

CSS Overflow: auto demo.

プレビュー全画面表示

overflow: hidden

CSS Overflow: hidden demo.

プレビュー全画面表示

overflow: scroll

CSS Overflow: scroll demo.

プレビュー全画面表示

実務での使いどころ

  • スクロール可能なコンテナの作成

    固定高さのコンテナ内で、コンテンツが溢れた場合にスクロールバーを表示させます。

注意点

  • overflow: hiddenはブロック整形コンテキストを生成するため、floatやmarginの折りたたみに影響を与える場合があります。

アクセシビリティ

  • overflow: hiddenで視覚的に隠されたコンテンツもスクリーンリーダーには読み上げられる場合があるため、aria-hiddenの併用を検討してください。

参考リンク