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
Inheritedno
Mediaall
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

Note: If applied (with value: paint, strict or content), this property creates:

  1. New containing block (for the descendants which position property is absolute or fixed).
  2. New stacking context.
  3. New block formatting context.

Syntax

Values

none
Indicates the element renders as normal, with no containment applied.
strict
Indicates that all containment rules except style are applied to the element. This is equivalent to contain: size layout paint.
content
Indicates that all containment rules except size and style are applied to the element. This is equivalent to contain: layout 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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
contain
Experimental
Chrome Full support 52Edge No support NoFirefox Full support 41
Notes Disabled
Full support 41
Notes Disabled
Notes See bug 1150081 for the overall implementation status.
Disabled From version 41: this feature is behind the layout.css.contain.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari No support NoWebView Android Full support 52Chrome Android Full support 52Edge Mobile ? Firefox Android Full support 41
Notes Disabled
Full support 41
Notes Disabled
Notes See bug 1150081 for the overall implementation status.
Disabled From version 41: this feature is behind the layout.css.contain.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See Also

Document Tags and Contributors

Last updated by: rego,