ページ全体のレンダリング性能を高めたり、コンテンツの中身が他のコンテンツへの影響することを抑止するための「CSS封じ込め」を行います。

contain: none;		/* デフォルト */
contain: strict;	/* contain: size layout paint; と同義 */
contain: content;	/* contain: layout paint; と同義 */
contain: size;		/* サイズの封じ込め */
contain: layout;	/* レイアウトの封じ込め */
contain: style;		/* スタイルの封じ込め */
contain: paint;		/* ペイントの封じ込め */
contain: size paint;	/* 複数指定 */

下記の例では、コンテンツ(article)の大きさは画像などの子要素の大きさに従い変化します。つまり、子要素の大きさを計算しないと親要素の大きさを決定することができません。

article {
  min-height: 6rem;
  border: 1px solid #999;
}

<article>
  <h2>Article #1</h2>
  <img src="img/sample.png" alt="Sample Image">
</article>

Article #1

contain: size を指定すると、親要素の大きさを計算する際に子要素の大きさを計算しなくなります。親要素や他要路の描画が早くなりますが、子要素を親要素中の格納するのは製作者の責任となります。contain: paint と組み合わせてもよいでしょう。

article {
  min-height: 6rem;
  border: 1px solid #999;
  contain: size;
}

Article #1

下記の例では Article#1 の画像に float: left を指定しているために、画像が Article#2 の領域まではみ出してしまっています。

article { border: 1px solid #999; }
img { float: left; }

<article>
  <h2>Article#1</h2>
  <img src="img/sample.png" alt="Sample Image">
  <p>This is article #1...</p>
</article>
<article>
  <h2>Article#2</h2>
  <p>This is article #2...</p>
</article> 

Article#1

This is article #1...

Article#2

This is article #2...

contain: layout を指定することによりコンテンツ内部の要素が他のコンテンツにレイアウト的な影響を及ぼすことを防ぐことができます。

article {
  border: 1px solid #999;
  contain: layout;
}

Article#1

This is article #1...

Article#2

This is article #2...

下記の例では Article の中の h2 によって章番号がインクリメントされ、Chapter 2 が3章になってしまっています。

body { counter-reset: chapter; }
article { border: 1px solid black; margin-left: 1rem; }
h2 { counter-increment: chapter; counter-reset: section; }
h2:before { content: counter(chapter) ". "; }

<h2>Chapter 1</h2>
<article>
  <h2>Article#1</h2>
</article>
<h2>Chapter 2</h2>

contain: style を指定することで、Chapter 2 の章番号が 3 になってしまうのを防ぎます。

article {
  border: 1px solid black;
  margin-left: 1rem;
  contain: style;
}

下記の例では高さ 50px のコンテンツの中に高さ80px の画像を表示しているために画像がはみ出してしまっています。

div.box {
  height: 50px;
  border: 1px solid #ccc;
}

<div class="box">
 <img src="img/sample.png" alt="Sample Image" height=80>
</div>

contain: paint を指定することで子要素がコンテンツをはみ出してしまうのを防ぐことができます。

div.box {
  height: 50px;
  border: 1px solid #ccc;
  contain: paint;
}

• https://developer.mozilla.org/ja/docs/Web/CSS/contain
• https://w3c.github.io/csswg-drafts/css-contain/#contain-property