overflow

概要

overflowプロパティは、コンテンツが要素のボックスに収まらない場合の処理方法を設定します。overflow-xとoverflow-yを一括指定でき、visible、hidden、scroll、auto、clipなどの値を取ります。レスポンシブデザインやモーダルウィンドウなど、コンテンツの表示制御が必要なあらゆる場面で基本となるプロパティです。

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — overflow
• Can I use — overflow