The CSS Propertie contain

The contain property indicates that an element and its contents are, as much as possible, independent of the rest of the document tree. This lets the browser recalculate layout, style, paint, size, or any combination of them for a limited area, improving performance.

.card { contain: content; }

.widget { contain: layout paint style; }

noneThe element renders as normal, with no containment effects applied.

strictComputes to size layout paint style, turning on all forms of containment.

contentComputes to layout paint style, turning on all forms of containment except size containment.

sizeTurns on size containment — the containment box can be laid out without examining its descendants.

inline-sizeTurns on inline-size containment — prevents the inline-size of the principal box from depending on its contents.

layoutTurns on layout containment — the containment box is totally opaque for layout purposes.

styleTurns on style containment — effects of properties don't escape the element.

paintTurns on paint containment — descendants don't display outside the element's bounds.

CSS Containment Module Level 2

Editor's Draft

W3C MDN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Show all code

Edit CSS online

The plugin that remembers hundreds of CSS items for you

Every CSS property — in a live demonstration

The bilingual CSS reference

previous next