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:none@print contain:paint@sm">...</div>