CSS Containment

CSS containment lets an element isolate parts of its rendering behavior so changes inside it have less impact on the surrounding document. The `contain` property can constrain layout, style, paint, and size relationships, helping browsers reduce the scope of rendering work.

CSS containment is controlled primarily with the `contain` property. A value such as `contain: layout` tells the browser that the element's internal layout can be treated as independent from the rest of the page for relevant layout calculations. Other containment types isolate painting, style effects, or intrinsic sizing behavior.

`contain: paint` prevents an element's contents from being painted outside its bounds, which also establishes clipping behavior. `contain: size` changes how the element contributes to its parent's sizing calculations, so explicit dimensions or other sizing constraints may become important. `contain: style` limits certain style-related effects from crossing the containment boundary.

Multiple containment modes can be combined, for example `contain: layout paint`. The `strict` and `content` shorthand values combine several containment modes, while `contain: none` disables containment. Modern CSS also provides `contain-intrinsic-size` to supply a placeholder intrinsic size when size containment prevents the browser from using the content's natural size.

Containment is useful for large, complex interfaces such as independently updating widgets, lists, dashboards, and components whose internal changes should not require broad rendering work. It is not automatically a performance win: containment changes layout, sizing, painting, or style semantics, so it should be applied where those isolation boundaries are appropriate.

Key points

Interview questions

What problem does CSS containment solve?

CSS containment gives the browser explicit boundaries around a component's layout, painting, styling, or sizing behavior. This can reduce how far rendering-related changes need to be considered. It can be especially useful for independently updating or complex components. The trade-off is that containment can change normal CSS behavior, so it should be used deliberately.

What is the difference between layout, paint, style, and size containment?

Layout containment isolates the element's internal layout from surrounding layout calculations. Paint containment restricts painting to the element's containment boundary. Style containment limits certain style-related effects across the boundary. Size containment changes how the element's contents contribute to its intrinsic size, which can require explicit dimensions or an intrinsic-size fallback.

Can multiple containment types be used together?

Yes. The `contain` property accepts multiple containment keywords, so a component can combine behaviors such as layout and paint containment. For example, `contain: layout paint` establishes both boundaries. The combined behavior should be chosen based on the component's actual rendering and sizing requirements rather than applied indiscriminately.

How does `contain-intrinsic-size` relate to size containment?

Size containment prevents an element's content from contributing its normal intrinsic size to sizing calculations. That can make the element behave as though its contents have little or no intrinsic size when dimensions are otherwise unconstrained. `contain-intrinsic-size` supplies a substitute intrinsic size for the contained content. This is useful when preserving predictable geometry matters while still benefiting from size containment.

Would you add CSS containment to every component for performance?

No. Containment is a semantic constraint as well as a performance hint, so adding it everywhere can introduce layout, sizing, painting, or style differences. I would identify components with expensive or independently changing subtrees and establish boundaries where they are correct. Then I would measure rendering behavior before and after the change rather than assuming containment is beneficial.