contain
Quick Summary for 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, leading to obvious performance benefits.
Code Usage for contain
/* Keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: layout; contain: style; contain: paint;  /* Multiple keywords */ contain: size paint; contain: size layout paint;  /* Global values */ contain: inherit; contain: initial; contain: revert; contain: unset; 
More Details for contain

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, leading to obvious performance benefits.

This property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box.

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

A new containing block (for the descendants whose position property is absolute or fixed). A new stacking context. A new block formatting context.

Syntax

/* Keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: layout; contain: style; contain: paint;  /* Multiple keywords */ contain: size paint; contain: size layout paint;  /* Global values */ contain: inherit; contain: initial; contain: revert; contain: unset; 

The contain property is specified as either one of the following:

Using a single none, strict, or content keyword. Using one or more of the size, layout, style, and paint keywords in any order.

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' sizes.

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 the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. And if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.

Formal definition

Initial valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

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

Examples

Simple layout

The markup below consists of a number of articles, each with content:

<h1>My blog</h1> <article>   <h2>Heading of a nice article</h2>   <p>Content here.</p> </article> <article>   <h2>Another heading of another article</h2>   <img src="graphic.jpg" alt="photo">   <p>More content here.</p> </article> 

Each <article> and <img> is given a border, and the images are floated:

img {   float: left;   border: 3px solid black; }  article {   border: 1px solid black; } 

You can immediately see an issue — no effort is made to clear the floating beyond the bottom of the article.

Float interference

If we were to insert another image at the bottom of the first article, a large portion of the DOM tree may be re-laid out or repainted, and this would interfere further with the layout of the second article:

<h1>My blog</h1> <article>   <h2>Heading of a nice article</h2>   <p>Content here.</p>   <img src="i-just-showed-up.jpg" alt="social"> </article> <article>   <h2>Another heading of another article</h2>   <img src="graphic.jpg" alt="photo">   <p>More content here.</p> </article> 

As you can see, because of the way floats work, the first image ends up inside the area of the second article:

Fixing with contain

If we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it:

img {   float: left;   border: 3px solid black; }  article {   border: 1px solid black;   contain: content; } 

This also means that the first image no longer floats down to the second article, and instead stays inside its containing element's bounds:

Specifications

Specification
CSS Containment Module Level 2 # contain-property

See also

CSS containment CSS content-visibility property CSS position property

Last modified: Feb 2, 2022, by MDN contributors

Select your preferred language English (US)Français日本語한국어Português (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

“Make no mistake: This is not your diary. You are not letting it all hang out. You are picking and choosing every single word.”


Dani Shapiro
Random CSS Property

element()

Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
element() css reference