Contain Property

ELI5 — The Vibe Check

CSS contain tells the browser 'this element is self-contained — changes inside it won't affect the outside layout.' It's like putting a component in a box and saying 'whatever happens in here, stays in here.' The browser can then optimize rendering because it knows the blast radius.

Real Talk

The CSS contain property declares that an element and its contents are independent from the rest of the document, enabling rendering optimizations. Values include layout, style, paint, size, and strict (all combined). It's the foundation of container queries and content-visibility.

Show Me The Code

.widget {
  contain: layout style paint;
}

When You'll Hear This

"Adding contain: layout to our cards improved scroll performance significantly" / "Container queries require containment — that's why contain: inline-size is needed"