contain

Define boundaries for layout, style and painting.

Overview

Examples

Contain layout and paint

Use contain:content to combine layout, paint and style containment. It does not include size containment: the panel can still respond to its content. The comparison below makes the paint boundary visible.

<section class="h:8rem w:12rem contain:content">  <div class="h:5rem w-3xs">Wide content</div></section>

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

Contain painting

Use contain:paint to prevent descendants from painting beyond the panel. The violet block is wider than its parent, so clipping is visible at the boundary. This example shows painting behavior, not a measured performance improvement.

<div class="h:8rem w:12rem contain:paint">  <div class="h:5rem w-3xs">Wide content</div></div>

Reset containment

Reset containment on the element that owns it. A child with contain:none cannot escape an ancestor’s paint containment. Here the same panel changes from paint to none at sm; widen the preview to reveal the overflow.

<div class="h:8rem w:12rem contain:paint contain:none@sm">  <div class="h:5rem w-3xs">Wide content</div></div>

Apply conditionally

Leave painting unconstrained initially, then apply paint containment at sm. The child keeps the same width in both states. Read conditions for breakpoint syntax.

<div class="h:8rem w:12rem contain:none contain:paint@sm">  <div class="h:5rem w-3xs">Wide content</div></div>