CSS contain Property Demo - Online Layout & Paint Isolation

The CSS contain property allows you to indicate that an element's subtree is independent from the rest of the page. This gives browsers critical hints to optimize rendering performance. By isolating layout, paint, or size calculations, the browser can skip expensive recalculations when only the contained subtree changes. It's one of the most impactful CSS properties for web performance, especially for complex UIs, widget-heavy pages, and infinite scroll implementations. Values include none, size, layout, paint, style, content (size+layout+paint), and strict (all four).

While both clip overflowing content, contain:paint goes significantly further. It creates a new stacking context, establishes a containing block for absolutely positioned descendants, and acts as a paint boundary. This means the browser can paint the element independently — if it hasn't changed, its pixels can be reused from a cached layer. overflow:hidden only clips content without providing these additional isolation guarantees. For performance-critical rendering, contain:paint is the stronger choice.

contain:size tells the browser that the element's size does not depend on its children. For block-level elements without an explicit height, the height collapses to 0 (padding and borders remain). The width typically remains 100% of the parent for block elements in normal flow. This is perfect for virtual scroll containers, lazy-loaded widgets with known dimensions, and carousel items where you want to pre-allocate space. Always set explicit width and height (or use content-visibility:auto which applies size containment automatically) when using contain:size to avoid unexpected collapsing.

contain:layout creates a formatting context boundary (similar to a BFC — Block Formatting Context). This means: (1) Internal layout changes (like a child growing) won't affect elements outside the container — no external reflow. (2) Floats inside the container are contained and won't escape. (3) Margin collapsing between the container's children and external elements is prevented. (4) The container acts as a baseline isolation point. It's ideal for independent UI components like modals, dropdown panels, and sidebar widgets where internal layout stability is desired.

content-visibility:auto is a powerful CSS property that automatically applies contain:size layout paint (equivalent to contain:content) to elements that are off-screen. This allows the browser to skip rendering work for off-screen content entirely, dramatically improving page load and scroll performance. You can think of contain as the low-level primitive, and content-visibility as the high-level, automated application of containment. Use contain for fine-grained control over always-visible elements, and content-visibility:auto for below-the-fold content sections.

contain:strict applies all four containment types (size, layout, paint, style) and offers the maximum isolation. However, it's also the most restrictive. For most practical use cases, contain:content (equivalent to size layout paint) provides an excellent balance of performance and flexibility. It enables all major optimizations while being less restrictive than strict. The key is choosing the least restrictive value that still accurately describes your element's independence — over-containing can break layouts just as under-containing misses optimization opportunities.

While widely supported, containment is not always safe. contain:size will collapse an element's height to 0 if no explicit height is set — this can break layouts unexpectedly. contain:paint creates a new stacking context which may affect z-index behavior. contain:layout affects how floats and margins interact. Always test thoroughly after applying containment. Start with contain:layout or contain:paint individually before combining them, and use browser DevTools to verify the element still renders as expected across all viewport sizes.

Chrome DevTools provides excellent containment debugging. In the Elements panel, look for the contain badge next to elements that have containment applied. In the Rendering tab (available via the three-dot menu → More tools → Rendering), you can enable "Layer borders" to visualize paint-contained layers. The Performance panel also shows reduced layout and paint work for contained elements. Firefox's DevTools similarly highlights containment in the inspector. When things look wrong, temporarily set contain:none to confirm whether containment is the culprit.