We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Initial valuenone
Applies toall elements
Computed valueas specified
Animation typediscrete
Canonical orderper grammar



Indicates the element renders as normal, with no containment applied.
Indicates that all containment rules are applied to the element. This is equivalent to contain: size layout style paint.
Indicates that all containment rules except size are applied to the element. This is equivalent to contain: layout style paint.
Indicates that the element can be sized without the need to examine its dependents for size changes.
Indicates that nothing outside the element may affect its internal layout and vice versa.
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.
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 ]


Specification Status Comment
CSS Containment Module Level 1 Candidate Recommendation Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0 No support[1] ? 40 ?
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 52.0 52.0 No support[1] ? ? 40 ?

[1] This feature implemented behind the preference layout.css.contain.enabled, defaulting to false, currently only supporting the values none and paint (see bug 1170781). See bug 1150081 for the overall implementation status.

Document Tags and Contributors

Last updated by: mfluehr,