CSS - contain() Property

The CSS property contain isolates an element and its content from the rest of the web page, creating a separate bubble within the page.

The CSS property contain includes four types of containment: size, layout, style, and paint. These can be applied to a container element either individually or via shorthand values.

Possible Values

none :This means no specific containment rules are applied. or
Combination of keywords :You can use one or more of these words: size (or inline-size), layout, style, and paint. They can be in any order and separated by spaces. or
Shorthand values :Either strict or content can be used.

Keyword	Description
none	The element displays as usual, with no containment applied.
strict	Every containment rule is applied on the element. This is the same as setting it to contain: size layout paint style
content	Every containment rule, with the exception of size, is applied on the element.
size	Size containment is applied on the element in both the inline and block directions, to calculate elements size.
inline-size	Containment rules for inline size are imposed on the element, allows the element's inline size to be calculated independently
layout	The internal arrangement of the element is self-contained, independent from the rest of the page.
style	In properties that can influence beyond an element and its children, their impacts are confined within the containing element.
paint	The element's descendants remain within its boundaries, if a descendant element extends beyond the boundaries, it is cropped to fit within the border box of the containing element.

Syntax

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

Applies to

All the HTML elements.

The contain property can have following values

Contain-Size

The size containment value signals the browser to exclude descendants when performing layout calculations for the page. The element must have the specified height and width properties, otherwise, it will be reduced to zero pixels square.

Example

The following example demonstrates size containment.

 
<html>
<head>
<style>
   .container {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      padding: 20px;
      box-sizing: border-box;
   }
   .inner {
      width: 100%;
      height: 100%;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
   } 
   .demo-content {
      width: 80%;
      height: 80%;
      background-color: white;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="inner">
         <div class="demo-content">
            <h1>Size Containment Example</h1>
               <p>This is an example of size containment using HTML and CSS.</p>
            </div>
         </div>
      </div>
</body>
</html>

Contain-Layout

The layout containment value tells the browser that the element's descendants have no effect on other page elements, and vice versa. This reduces the calculations required for page layout.

Example

The following example demonstrates layout containment.

 
<html>
<head>
<style>
   .container {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      padding: 20px;
      box-sizing: border-box;
   }
   .demo-header {
      background-color: lightblue;
      padding: 10px;
      margin-bottom: 10px;
   }
   .demo-content {
      background-color: lightgray;
      padding: 10px;
      height: 200px;
   }
   .demo-footer {
      background-color: lightgreen;
      padding: 10px;
      margin-top: 10px;
   }
</style>
</head>
<body>
<div class="container">
<div class="demo-header">
    <h1>Header</h1>
</div>
<div class="demo-content">
    <p>Content goes here.</p>
</div>
<div class="demo-footer">
    <p>Footer goes here.</p>
</div>
</div>
</body>
</html>

Contain-Style

The style-containment value tells the browser to restrict certain CSS properties, such as counters and quotes, to the contained element.

The counter-increment and counter-set properties must stay within the subtree of the contained element. If they go beyond this range, a new counter is created.

Example

The following example demonstrates style containment uisng counters.

 
<html>
<head>
<style>
   @counter-style item-counter {
   system: fixed;
   symbols: "A" "B" "C" "D" "E" "F";
   suffix: " ";
   }
   .container {
   counter-reset: item-counter;
   }
   .container li {
   list-style: item-counter;
   }
</style>
</head>
<body>
<div class="container">
   <h1>Contain with CSS Counter Style Containment</h1>
   <ul>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   <li>Fourth item</li>
   <li>Fifth item</li>
   <li>Sixth item</li>
   </ul>
</div>
</body>
</html>

Example

The following example demonstrates style containment uisng quotes.

 
<html>
<head>
<style>
   .demoquote {
      quotes: "❮" "❯";
      font-size: 30px;
      font-style: italic;
      color: red;
   }
   .demoquote::before {
      content: open-quote;
      color: black;
   }
   .demoquote::after {
      content: close-quote;
      color: black;
   }
</style>
</head>
<body>
   <p class="demoquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p class="demoquote"> Ut enim ad minim veniam, quis nostrud exercitation.</p>
   <p class="demoquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Paint

The paint containment value instructs the browser not to paint any part of the element's descendants outside its border-box.

Example

The following example demonstrates style containment uisng quotes.

 
<html>
<head>
<style>
   .container {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
   }
   .demo-paint {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
</style>
</head>
<body>
<div class="container">
   <div class="demo-paint"></div>
</div>
</body>
</html>

Contain-Content

The content containment value combines layout and paint containment. This means that all the good properties of both values act on the contained element.

Contain-Strict

The strict containment value combines layout, paint, and size containment. It means that all good properties of each value apply to the contained element.

Advantages of Contain Property

The contain property improves computer performance by allowing the browser to focus solely on the elements within the bubble, such as their appearance and positioning, without examining the entire web page.
It makes easier to manage and improves the efficiency of the web page. The browser does not have to constantly redesign the entire page layout.
The containment ensures smooth functioning of both static and dynamic web pages, especially those with frequently changing content.
Using the contain property proves beneficial for web pages that contain independent groups of elements. It ensures that the content of an element does not affect elements outside its intended scope.