overflow は、コンテンツがボックスに対して大きすぎる場合に何が起こるかを制御します — クリップされるか、スクロールするか、またははみ出すかです。
css
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
一般的なパターン: 水平方向のオーバーフローを防ぎながら、垂直方向のスクロールを許可します。
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
重要な点: スクロール コンテナには、制約されたサイズ（height/max-height）と overflow: auto が必要です。サイズ制限がないと、ボックスは単に成長し、スクロールしません。
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
overflow を visible 以外に設定すると、新しいブロック フォーマッティング コンテキストが確立され、浮動要素を含め、マージンの相殺を防ぎます — 歴史的には「clearfix」として使用されていました。
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory; /* snap to items while scrolling */
overscroll-behavior: contain; /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
scroll-snap は JS なしでカルーセルを構築します。overscroll-behavior は、スクロールされたパネルが背後のページもスクロールするのを防ぎます（モーダル/チャット ウィンドウに最適）。
overflow はスクロール領域、テキスト クリッピング（text-overflow: ellipsis 付き）、およびモーダル/パネル スクロール動作を管理します。
スクロール コンテナにはサイズ制約が必要なこと、overflow がフォーマッティング コンテキストを作成すること、およびモダン ヘルパー（scroll-snap、overscroll-behavior）がオーバーフロー周辺の実践的なレイアウトと UX ニーズをカバーしていることを知ることが重要です。