{"id":307236,"date":"2020-05-08T07:33:13","date_gmt":"2020-05-08T14:33:13","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=307236"},"modified":"2020-05-08T08:06:10","modified_gmt":"2020-05-08T15:06:10","slug":"contain","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/contain\/","title":{"rendered":"contain"},"content":{"rendered":"\n

The contain<\/code> property in CSS indicates to the browser that the element and its descendants are considered independent of the document tree as much as possible. This potentially provides performance benefits with calculations in layout, style, paint, size, or any combination for a limited area of the DOM and not the entire page.<\/p>\n\n\n\n

The property has five standard values and two shorthand values that combine variations of the standard values. Each value has some unique and shared benefits depending on the context of the element that applies them.<\/p>\n\n\n\n

The typical use of this property is an element that contains content of some type. Consider a widget that renders the incoming data that changes the layout and visuals of the element\u2019s descendants. Another element to consider is one that contains the results of third-party data, such as a banner ad, where the benefits of containment let us either de-prioritize painting certain content, how to handle sizing the content that\u2019s received, or determine whether content should even be visible. A mostly static site, on the other hand, will receive little benefit other than the first layout and paint to the screen on page load.<\/p>\n\n\n

Syntax<\/h3>\n\n\n
div {\n  contain: none | strict | content | [ size || layout || style || paint ];\n}<\/code><\/pre>\n\n\n\n
div {\n\u00a0 contain: none; \/* no containment on element *\/\n\u00a0 contain: layout; \/* influences how element relates to other elements in the document *\/\n\u00a0 contain: paint; \/* influences how element is painted to screen *\/\n\u00a0 contain: size; \/* influences how element affects size calculations for the page *\/\n\u00a0 contain: style; \/* is considered at-risk for removal from spec *\/\n\u2028\n\u00a0 contain: content; \/* combines layout and paint *\/\n\u00a0 contain: strict; \/* combines layout, paint, and size *\/\n}<\/code><\/pre>\n\n\n
Property values<\/h3>\n\n
Layout<\/h4>\n\n\n
The layout<\/code> containment value informs the browser that none of the element\u2019s descendants affect other elements on the page, nor do those other elements have any effect on the descendants of the contained element. This allows the browser to potentially reduce the number of calculations necessary when creating the page layout<\/p>\n\n\n\n
Another benefit is that if the contained element is off-screen or obscured in some way, then the browser may delay or shift related calculations to a lower priority. An example of this is a contained element not in view at the end of a block element and the beginning of that block element is visible.<\/p>\n\n\n\n
An element with layout<\/code> containment becomes a containing box for positioned descendants \u2014 such as elements with absolute positioning. The element receives a new stacking context in relation to the page and the z-inde<\/code>x property can be used. Although, directional properties, such as top<\/code> or left<\/code>, do not apply.<\/p>\n\n\n\n
Even though the descendants of the contained element may not influence other elements on the page, they can still influence their contained ancestor element. For example, a descendant can cause the contained element to resize in reaction to changes. In that case, the contained element can still potentially influence other elements on the page but the descendants will still not be involved in those calculations.<\/p>\n\n\n\n
The following demo provides a simple explanation for what happens when the layout<\/code> containment is applied. When clicking each of the top boxes the containment is applied and the red arrows will change appearance. The appearance of the red arrows suggests whether the descendants of the box affect the other boxes on the page during layout calculations.<\/p>\n\n\n\n