The values for the contain
property indicate the type of containment that you want to apply to that element.
Layout containment
article {
contain: layout;
}
Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using contain: layout
you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.
In addition:
-
float
layout will be performed independently. - Margins won't collapse across a layout containment boundary
- The layout container will be a containing block for
absolute
/fixed
position descendants. - The containing box creates a stacking context, therefore
z-index
can be used.
Paint containment
article {
contain: paint;
}
Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint
containment as layout
containment (see above).
Another advantage is that 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.
Size containment
article {
contain: size;
}
Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.
If you turn on contain: size
you need to also specify the size of the element you have applied this to using contain-intrinsic-size
(or the equivalent longhand properties). It will end up being zero-sized in most cases, if you don't manually give it a size.
Style containment
article {
contain: style;
}
Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree.
Using contain: style
would ensure that the counter-increment
and counter-set
properties created new counters scoped to that subtree only.
Special values
There are two special values of contain:
We encountered the first in the example above. Using contain: content
turns on layout
and paint
containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size
containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.
To gain as much containment as possible use contain: strict
, which behaves the same as contain: size layout paint style
: