contain

Providing performance benefits by limiting calculations of layout.

Overview

Examples

Contain layout and paint

Use contain:content for self-contained panels where layout and paint work should not affect the outside page.

<section class="contain:content">    Feed item</section>

@layer utilities {    .contain\:content {        contain: content    }}

Contain painting

Use contain:paint when overflowing visual effects should be contained without opting into every containment mode.

<div class="contain:paint">    Preview</div>

Reset containment

Use contain:none when a nested element needs to participate normally in layout or painting again.

<div class="contain:content">    <div class="contain:none">Escapes containment</div></div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="contain:content contain:paint@sm contain:none@print">...</div>