contain

The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page.

/* Keyword values */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;

/* Global values */
contain: inherit;
contain: initial;
contain: unset;

This property is useful on pages that contain a lot of widgets that are all independent as it can be used to prevent one widget's CSS rules from changing other things on the page.

Syntax

Values

none

Indicates the element renders as normal, with no containment applied.

strict

Indicates that all containment rules are applied to the element. This is equivalent to contain: size layout style paint.

content

Indicates that all containment rules except size are applied to the element. This is equivalent to contain: layout style paint.

size

Indicates that the element can be sized without the need to examine its descendants for size changes.

layout

Indicates that nothing outside the element may affect its internal layout and vice versa.

style

Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don't escape the containing element.

paint

Indicates that descendants of the element don't display outside its bounds. If an element is off-screen or otherwise not visible, its descendants are also guaranteed to not be visible.

Formal syntax

none | strict | content | [ size || layout || style || paint ]

Specifications

Browser compatibilityUpdate compatibility data on GitHub