要素からはみ出したコンテンツの表示方法を指定するプロパティです。visible、hidden、scroll、autoなどがあり、スクロール領域の制御やレイアウトの調整に使用します。overflow-xとoverflow-yで軸ごとに指定も可能です。
overflow: visible | hidden | scroll | auto| overflow-hidden | overflow: hidden |
| overflow-x-auto | overflow-x: auto |
| overflow-y-scroll | overflow-y: scroll |
| overflow-clip | overflow: clip |
.element {
overflow: visible;
}.box {
width: 200px;
height: 80px;
overflow: visible;
}visible（初期値）はみ出した内容もそのまま表示されます。
.box {
width: 200px;
height: 80px;
overflow: hidden;
}hiddenはみ出した部分を非表示にします。スクロールもできません。
.box {
width: 200px;
height: 80px;
overflow: scroll;
}scrollは常にスクロールバーが表示されます。内容がはみ出していなくてもバーが出ます。
.box {
width: 200px;
height: 80px;
overflow: auto;
}autoは必要な時だけスクロールバーが表示されます。はみ出した時だけバーが出ます。
overflow: hiddenは要素の角丸やマスキング効果にも使える。
overflow: hiddenが祖先にあるとposition: stickyが効かなくなる副作用は、AIが原因究明で見落とす定番です。単に「はみ出しを切りたい」だけならスクロールコンテナを作らないoverflow: clipという新しい選択肢もあります。
position: stickyが効かない原因を祖先のoverflow設定から調査して
overflow: hiddenとclipの違いを踏まえて、この装飾のはみ出し対策を実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。