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.

What is the CSS Containment Reference?

Reference for CSS containment — the contain property values (layout, paint, size, style, inline-size), content-visibility, contain-intrinsic-size and @container query syntax for container queries. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Containment Reference

Name: CSS Containment Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

What each containment type actually prevents

Understanding what each keyword isolates helps you choose the minimum needed:

layout prevents the element’s descendants from affecting the layout of elements outside it. Floats, margins, and height changes inside a layout-contained box cannot shift anything outside. This is the containment most useful for independent widgets and dashboards panels.

paint restricts drawing to the element’s border box. Children cannot paint outside it (overflow is clipped, even without overflow: hidden), and the browser can skip repainting this box if it is outside the viewport. Note: this creates a stacking context, which affects z-index for descendants.

size tells the browser the element’s dimensions are independent of its children. This means the browser can skip a full layout pass of the subtree when calculating the parent’s size — but it requires you to give the element explicit dimensions, or it collapses to zero. inline-size only isolates the inline (horizontal) axis, which is safe for container queries without losing block height.

style keeps CSS counters and content property values from escaping the element’s subtree. Without style containment, a counter defined inside can bleed into sibling elements — a subtle bug in complex list layouts.

Using `content-visibility: auto` for long-list performance

On pages with many cards, comment threads, or article previews, content-visibility: auto can produce a significant rendering speedup by skipping off-screen items entirely. The browser reserves space using contain-intrinsic-size and only fully renders each item when it scrolls near the viewport.

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px; /* estimated height */
}

The auto keyword in contain-intrinsic-size lets the browser cache the actual rendered size after the first render, so the placeholder size becomes accurate over time and scroll jank from incorrect estimates reduces.

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.
Paint containment creates a stacking context — descendants can no longer escape the element’s z-index context, which can unexpectedly bury dropdowns or tooltips.