The contain property is a way to tell the browser that an element and its subtree can be treated as a self-contained unit for layout, style, paint, and intrinsic sizing decisions. By marking an element as contained, you signal that changes inside that element should not force the UA (user agent) to re-evaluate or re-paint outside the element, and likewise that the outside should not be used when computing certain properties for the inside. This lets the rendering engine make stronger assumptions about boundaries and dependencies, which it can exploit to avoid expensive cross-tree work.

One of the main practical effects of using contain is improved rendering performance: the browser can restrict reflows, paints, and size calculations to the element’s subtree instead of propagating them through ancestor and sibling trees. Because of that, containment is often used on complex widgets, isolated UI components, or large lists where you want localized updates to remain cheap. It is complementary to hints like will-change (which signals upcoming changes) but is declarative about isolation rather than predictive about specific upcoming changes.

Containment also changes how certain visual and layout interactions behave. For example, clipping and paint boundaries may be constrained (so content can’t visually leak out of the element), stacking contexts and compositing boundaries can be established, and intrinsic size calculations may be done using only the element’s subtree. Because of those effects, containment can influence behaviors tied to positioning and overflow - see position and overflow - as well as interactions with transforms and compositing, such as when you use transform to create a new rendering context.

In practice, use containment when you want clear component boundaries and predictable, efficient rendering for a subtree. It’s particularly useful for self-contained widgets, virtualized content, or elements that do not rely on external layout or style information. Be mindful that making an element contained can change how descendants relate to ancestors (for example, their ability to affect outside layout, to overflow visibly, or to participate in outside stacking contexts), so test visual and interactive behavior after applying containment.