CSS containment: the contain property

Why containment matters

When you change one element's style, the browser may need to recalculate layout for the entire page. CSS containment lets you draw boundaries: "changes inside this element won't affect anything outside it." The browser uses those boundaries to skip unnecessary work during style recalculation, layout, and paint.

The contain values

/* Layout containment — element's layout is independent */
.widget { contain: layout; }

/* Paint containment — nothing paints outside the element's box */
.widget { contain: paint; }

/* Size containment — element's size doesn't depend on children */
.widget { contain: size; }

/* Shorthand: strict = size + layout + paint */
.widget { contain: strict; }

/* Shorthand: content = layout + paint (most useful) */
.widget { contain: content; }

contain: content is the sweet spot for most use cases. It tells the browser that the element's internal layout and painting are independent, without requiring a fixed size.

content-visibility: auto

The highest-impact containment feature is content-visibility: auto. It automatically skips rendering for off-screen elements — the browser doesn't layout, paint, or even parse the subtree until it's near the viewport:

.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  /* Estimated height — prevents layout shift when content loads */
}

This can dramatically reduce initial render time for long pages. A page with 50 sections might only render 3–4 on first load, deferring the rest until the user scrolls.

Containment and container queries

container-type: inline-size implicitly applies layout and style containment. If you're already using container queries, you're already getting containment benefits. The two features were designed to work together.

Browser support

contain is supported in Chrome 52+, Safari 15.4+, and Firefox 69+. content-visibility is supported in Chrome 85+, Safari 17.0+, and Firefox 125+. Both are Baseline Widely Available in 2026.