overflow
中級読み方：オーバーフロー｜英語：Overflow
要素からはみ出した内容の表示方法を指定するプロパティで、hidden, scroll, auto などがあるよ。
やさしい説明
overflowは、要素からはみ出した内容をどう表示するか指定するプロパティです。
コップに水を入れすぎると溢れますよね。overflowは「溢れた水をどうするか」を決めるプロパティです。隠す（hidden）、スクロールバーを出す（scroll）、自動判断（auto）から選べます。
高さや幅を固定した要素で、中身がはみ出す場合に使います。チャット画面やサイドバーのスクロールエリアを作るのに必須です。
具体例・使い方
/* はみ出した部分を隠す */
.card { overflow: hidden; }
/* 必要なときだけスクロールバー表示（推奨） */
.chat { height: 400px; overflow-y: auto; }
/* 横スクロール（コードブロックやテーブルなど） */
.table-wrapper { overflow-x: auto; }
pre { overflow-x: auto; }
/* 常にスクロールバーを表示（レイアウトが安定する） */
.sidebar { height: 100vh; overflow-y: scroll; }overflowの値と使い分け
- visible（デフォルト） — はみ出した内容がそのまま表示される。高さ・幅を固定していないときはこれ
- hidden — はみ出した内容を非表示にする。画像の角丸クリッピングに使う
- auto — はみ出したときだけスクロールバーを表示。チャット・モーダルのスクロールエリアに最適
- scroll — 常にスクロールバーを表示。レイアウトのガタつき防止に使う場面もある
- clip（新しい値） — hidden に似ているが、スクロールプログラムも無効化される
overflow-x（横方向）と overflow-y（縦方向）を個別に指定できます。「縦スクロールあり・横ははみ出し非表示」のような組み合わせも可能です。
いつ使う？
- スクロール可能なチャット欄・ログエリアを作るとき（
overflow-y: auto） - 画像が
border-radiusからはみ出さないようにするとき（overflow: hidden） - 横に長いテーブルやコードを横スクロールさせるとき（
overflow-x: auto） - モーダルやドロワーの中身をスクロールさせるとき
間違いやすいポイント
❌ overflow: hidden が position: sticky を壊す
親要素に overflow: hidden があると、子要素の position: sticky が効かなくなります。stickyが効かないときはまず祖先要素の overflow を確認しましょう。
❌ overflow: scroll で常にスクロールバーが出る
内容がはみ出していなくてもスクロールバーが表示されてレイアウトが変わります。通常は overflow: auto を使う方が見た目がきれいです。
よくある疑問
Q: overflow: hidden と overflow: auto の違いは？
A: hiddenははみ出した部分を完全に隠します。autoは内容がはみ出したときだけスクロールバーを表示します。
Q: 横方向だけスクロールさせるには？
A: overflow-x: auto; overflow-y: hidden; と指定します。横スクロールのカルーセルなどに使います。
Q: テキストがはみ出すのを防ぐには？
A: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; の3つを組み合わせると、はみ出す部分が「...」で省略されます。
関連用語
📖 関連レッスン
レッスンを見る →