Widely available Useful for self-contained widgets and performance-sensitive UI, but it should be applied with a clear understanding of the constraints it introduces.

contain

The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.

PerformanceContainmentLayout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contain
52
79
69
15.4
52
15.4
content
52
79
69
15.4
52
15.4
none
52
79
69
15.4
52
15.4
strict
52
79
69
15.4
52
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Layout, style, and paint */
.widget {
  contain: layout style paint;
}

/* strict: size + layout + style + paint */
.isolated-component {
  contain: strict;
}

/* content: layout + style + paint (excluding size) */
.card {
  contain: content;
}

Live demo

contain: layout

CSS Containment Contain: layout demo.

PreviewFullscreen

contain: content

CSS Containment Contain: content demo.

PreviewFullscreen

contain: paint

CSS Containment Contain: paint demo.

PreviewFullscreen

Use cases

  • Widget isolation

    Constrain independent components so updates inside them trigger less outside work.

  • Heavy panels

    Improve performance of dashboards or large application regions that update frequently.

Cautions

  • Containment can change layout and sizing behavior, so test components carefully after applying it.
  • Do not add contain as a reflexive micro-optimization without evidence that isolation helps.

Accessibility

  • Performance improvements can help maintain smoother interaction and reading stability for complex interfaces.

Related links