ボックス
overflow
overflow は、中身が箱に収まらないときにどう見せるかを決めます。はみ出したまま見せる、切り取って隠す、スクロールで読めるようにする、のどれかを選べます。
構文
[ visible | hidden | clip | scroll | auto ]{1,2}プレビュー
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
overflowvisibleoverflow-x
visibleoverflow-y
コード
.box {
overflow: visible;
}コントロール
overflow
横と縦を同じ値にする
overflowvisible
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
解説
値の書き方
visible：はみ出した中身をそのまま箱の外に見せます。初期値です。hidden：箱の外を切り取って隠します。ユーザーはスクロールできませんが、JavaScript からはスクロールできます。clip：hiddenと同じく切り取りますが、JavaScript からもスクロールできません。scroll：はみ出していなくても、いつもスクロールバーを出します。macOS のようにスクロールバーを重ねて出す環境では、スクロールしているときだけ出ます。auto：はみ出したときだけスクロールバーを出します。ふつうはこれを使います。
横と縦を別々に決める
値を 2 つ書くと、1 つ目が横（overflow-x）、2 つ目が縦（overflow-y）になります。片方を visible か clip にして、もう片方を hidden・scroll・auto のどれかにすると、visible は auto に、clip は hidden に変わります。片方だけはみ出したまま見せて、もう片方をスクロールさせることはできません。
このページのプレビューは、横には切れ目の無い長い URL が、縦には箱の高さを超える文章がはみ出します。hidden・scroll・auto のときは、箱の右下のつまみで大きさを変えると、はみ出す量も変わります（visible と clip の箱にはつまみが出ません）。
hidden の箱は position: sticky を止める
hidden・scroll・auto の箱はスクロールする箱として扱われるので、中にある position: sticky の要素はページではなくその箱に貼り付きます。はみ出しを隠すだけで sticky を効かせたままにしたいときは clip を使います。