What does the contain property do?

It tells the browser that an element's subtree is independent of the rest of the page for layout, paint, size or style. This lets the engine skip work outside the element when something inside changes, improving rendering performance on large or dynamic pages.

What is the difference between contain:size and contain:inline-size?

contain:size makes the element's size independent of its contents on both axes, so you must give it an explicit size or it collapses to zero. contain:inline-size only contains the inline axis, which is the safe form used to enable container queries without collapsing block height.

How does content-visibility:auto improve performance?

It skips rendering — layout, paint and even style — for elements that are off-screen, only rendering them as they approach the viewport. Pair it with contain-intrinsic-size so the browser can reserve space and keep the scrollbar accurate before the content is rendered.

How do container queries relate to containment?

A container query targets the size of an ancestor rather than the viewport. To make an element a query container you set container-type (size or inline-size), which applies the corresponding containment, then write @container rules that respond to that container's dimensions.

Is this reference searched in the browser?

Yes. All containment values and syntax are bundled into the page and filtered locally. Nothing is sent to a server.

CSS Containment Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Isolate subtrees for faster rendering

CSS containment lets you promise the browser that an element’s subtree is independent of the rest of the document, so the engine can skip work when that subtree changes. This reference covers the contain keywords, the content-visibility shortcut, intrinsic sizing and @container query syntax.

How it works

The contain property accepts one or more independent keywords, plus the shorthands content (layout paint style) and strict (layout paint style size):

.widget { contain: layout paint; }      /* isolate layout + paint */
.card   { content-visibility: auto;      /* skip off-screen render */
          contain-intrinsic-size: auto 200px; }
.panel  { container-type: inline-size; } /* become a query container */

@container (min-width: 40rem) {
  .panel .title { font-size: 1.5rem; }
}

content-visibility: auto applies layout paint size containment and skips rendering until the element nears the viewport; contain-intrinsic-size supplies a placeholder size so scrolling stays stable.

Tips and notes

contain: size collapses an element with no explicit dimensions — prefer inline-size for container queries.
content-visibility: auto is the highest-leverage value for long lists; always pair it with contain-intrinsic-size.
container-type: inline-size enables width-based @container queries without breaking block height; container-type: size requires a fixed height too.
Name containers with container-name to target a specific ancestor: @container sidebar (min-width: …).
Containment can hide overflow and break position: fixed descendants — test sticky/fixed children after applying it.