`overflow` はみ出した中身の扱いを決める

重要度4 / 5

意味

箱からはみ出した中身を、隠すか、スクロールさせるかを決めます。hidden は見えない部分を切り、auto ははみ出したときだけスクロールできます。

横にはみ出した原因を隠すためだけに hidden を付けると、直すべき幅の指定を見落とします。スクロールが必要な一覧や、あふれてよい装飾に限って使います。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="panel">この文章は幅を超えるので、はみ出した分をスクロールで読めます。</div>

CSS

.panel {
  width: 12rem;
  overflow: auto;
  background: #efeef8;
  padding: 0.5rem 0.75rem;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）