contain
contain は、箱の中身を外から切り離して（封じ込めて）、中の変化がページのほかの部分に影響しないことをブラウザに約束します。ブラウザはその範囲だけ計算し直せばよくなるので、描画が速くなります。
構文
none | strict | content | [ [ size | inline-size ] || layout || style || paint ]プレビュー
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: visible;
height: auto;
contain: paint;
}コントロール
containpaint
大きさ（size・inline-size）
ほかの種類
layout中の配置を切り離す
styleカウンターを閉じ込める
paintはみ出しを切る
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
解説
値の書き方
none：封じ込めません。初期値です。size：大きさを、中身が無いものとして決めます。高さを決めていない箱は、中身があっても縮みます。inline-size：sizeと同じことを、行の向き（横書きなら幅）だけにします。size とは一緒に書けません。layout：中の配置を切り離します。中の float やマージンが外に出なくなり、中のposition: absoluteとposition: fixedの要素は、この箱を基準に置かれます。style：counter-incrementなどのカウンターと引用符の数え方が、箱の外に影響しないようにします。paint：中身を、padding の外側の線（overflow の切り取りの線）で切ります。overflow: clipと同じように、はみ出した部分が見えなくなります。strict：size layout style paintと同じです。content：layout style paintと同じです。大きさ以外をまとめて封じ込めます。
プレビューの見方
このページのプレビューは、補助の宣言で overflow: visible と height: auto にして、はみ出した中身が見え、箱の高さが中身に合うようにしています。1 行目の長い URL が箱の右にはみ出しています。paint にするとはみ出した URL が切られ、size にすると箱の高さが縮んで文章が下にはみ出します。strict では両方が起きて、縮んだ箱の中身はほとんど見えなくなります。
inline-size は、このプレビューでは変わりません。箱の幅が 240px と決まっているからです。幅が中身で決まる箱（display: inline-block や float の要素など）では、中身が無いものとして幅が縮みます。
よく使う場面
- ページの中で独立したウィジェットや、長いリストのそれぞれの項目に
contain: contentを書いて、中の変化で計算し直す範囲を狭めます。 - コンテナクエリの
container-typeは、内部でsizeやinline-sizeの封じ込めを使います。中身で幅が決まらないようにして、中身から幅を問い合わせても堂々巡りにならないようにするためです。
気をつけること
layoutとpaintは、重なりの基準（スタッキングコンテキスト）も作ります。中の z-index は、箱の外の要素とは比べられなくなります。layoutの箱はベースラインを持たないものとして扱われ、行の中でベースラインに揃えたときの位置が変わります。sizeとpaintは、表の行やdisplay: inlineの要素には効きません。sizeは表のセルと表そのものにも効きませんが、paintはセルには効きます。- 主要なブラウザすべてで使えます。
styleは Firefox が 103、Safari が 27 から対応しています。