CSS contain Property


The contain CSS property is used to optimize the rendering performance of a web page by hinting to the browser how an element and its contents should be treated for layout and rendering. It helps in isolating an element and its subtree from the rest of the page, allowing the browser to make rendering optimizations. This property can take values like none, strict, content, or size, each indicating a different level of containment. For instance, setting contain: layout instructs the browser to treat an element as an isolated layout context, potentially improving performance. contain is particularly useful in scenarios where you want to limit the scope of layout calculations, such as when dealing with dynamic content or complex web applications.

Initial value
Applies to
all elements
Computed value
as specified
JavaScript syntax


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


  • noneThis value indicates that the property has no effect. The element renders as normal, with no containment effects applied.
  • strictThis value computes to size layout paint style, and thus turns on all forms of containment for the element.
  • contentThis value computes to layout paint style, and thus turns on all forms of containment except size containment for the element.


<div style="contain: paint">
<p>This text will be clipped to the bounds of the box.</p>
<p>This text will not be clipped to the bounds of the box.</p>
div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;

Browser Support

The following table will show you the current browser support for the CSS contain property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023