overflow
中級読み方：オーバーフロー｜英語：Overflow
要素からはみ出した内容の表示方法を指定するプロパティで、hidden, scroll, auto などがあるよ。いつ使う？ テキストが長すぎてボックスからはみ出すとき、スクロール可能なエリアを作りたいとき、はみ出した部分を隠したいときに使うよ。間違いやすいポイント: overflow: hidden を親要素に指定すると、position: sticky が効かなくなるよ。また、overflow: hidden は子要素のbox-shadowやドロップダウンメニューも切り取ってしまうから注意しよう。
やさしい説明
overflowは、要素からはみ出した内容をどう表示するか指定するプロパティです。
コップに水を入れすぎると溢れますよね。overflowは「溢れた水をどうするか」を決めるプロパティです。隠す（hidden）、スクロールバーを出す（scroll）、自動判断（auto）から選べます。
高さや幅を固定した要素で、中身がはみ出す場合に使います。チャット画面やサイドバーのスクロールエリアを作るのに必須です。
具体例・使い方
/* はみ出した部分を隠す */
.card { overflow: hidden; }
/* 必要なときだけスクロールバー表示 */
.chat { height: 400px; overflow-y: auto; }
/* 横スクロール（コードブロック等） */
pre { overflow-x: auto; }いつ使う？
スクロール可能なエリアを作るとき、画像が角丸からはみ出さないようにするとき（overflow: hidden + border-radius）、横に長いテーブルを横スクロールさせるときに使います。
間違いやすいポイント
❌ 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つを組み合わせると、はみ出す部分が「...」で省略されます。
関連用語
📖 関連レッスン
レッスンを見る →