{"id":3519,"date":"2024-08-19T10:12:53","date_gmt":"2024-08-19T15:12:53","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3519"},"modified":"2024-08-19T10:12:54","modified_gmt":"2024-08-19T15:12:54","slug":"the-css-contain-property","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-css-contain-property\/","title":{"rendered":"The CSS contain property"},"content":{"rendered":"\n

The purpose<\/em> of CSS\u2019 contain<\/code> property (\u201cCSS containment\u201d) is twofold:<\/p>\n\n\n\n

    \n
  1. Optimization<\/li>\n\n\n\n
  2. Styling possibilities<\/li>\n<\/ol>\n\n\n\n

    When we apply\u00a0contain<\/code>\u00a0to an element we’re isolating it (and it\u2019s descendents) from the rest of the page, and this isolation what opens those possibilities. There are different types of containment which all do different things, and we\u2019ll be getting into each of them.<\/p>\n\n\n

    .element<\/span> {\n  contain<\/span>: size;\n  contain<\/span>: paint;\n  contain<\/span>: layout;\n  \n  \/* they can also be combined, e.g. *\/<\/span>\n  contain<\/span>: size layout;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    First, optimization<\/strong>. When something changes<\/em> an element after the page has rendered, the browser rethinks the entire page in case that element affects the rest of the page (visible or not). But with a contained element, we let the browser know that the change we made is restricted to only<\/em> the contained element and its children, and the browser needn\u2019t bother with the rest of the page because there won\u2019t be any impact on that.<\/p>\n\n\n\n
    Second, relative styling<\/strong>. Meaning positioning, visibility, stacking, sizing, etc, and by \u201crelative\u201d I mean styling an element in comparison to that of the viewport or the parent element \u2014 relative positioning<\/em> and relative sizing<\/em> are two good examples of this that we\u2019ve had for a long time.<\/p>\n\n\n\n
    Since the introduction of CSS Containment, a lot more relative styling can be done in the scope the contained element and its descendants. You\u2019ll see examples as we proceed.<\/p>\n\n\n\n
    In this article, CSS Containment refers to the CSS contain<\/code> property. Its namesake W3C Standard<\/a>, however, covers a few more specifications, like container units. <\/p>\n\n\n\n
    Size Containment<\/h2>\n\n\n\n
    Although \u201csize containment\u201d sounds highly useful, in practice you might not use this much.<\/p>\n\n\n\n
    When an element\u2019s size is contained<\/em>, the browser does not allow anything that happens inside the contained element<\/strong> (to the content or the descendant elements)<\/strong> to affect its size<\/strong>. In other words, you have a way to achieve truly fixed sizing.<\/p>\n\n\n\n
    But fixed sizing is not in trend. These days we have a lot of options for for dynamic sizing. For instance, CSS units relative to the root font size (rem<\/code>, rex<\/code>, etc.), units responsive to the viewport size (vw<\/code>, dvh<\/code>, etc.), units relative to the current font size (em<\/code>, lh<\/code>, etc.), you name it. Which means we usually do a pretty good job of sizing the different elements on a page for different screen sizes and content.<\/p>\n\n\n\n
    What if, for example, a user is interacting with a page and caused new dynamic information to appear on the page? This new information takes up space. Now have options and can make a choice.<\/p>\n\n\n\n
      \n
    • Is it better to allow the element, and potentially the entire page, to reflow and change?<\/li>\n\n\n\n
    • Or is it better to contain the element so that the changes prevent<\/em> the reflow?<\/li>\n<\/ul>\n\n\n\n
      If it feels like the latter, size containment can be the solution (or part of the solution) for you.<\/p>\n\n\n\n
      Be sure to set the desired dimensions, width and height (or logical properties), or aspect ratios when using size containment, because the browser initially renders a contained element as if it\u2019s empty, and without the right dimensions set, elements might end up having a zero dimension.<\/p>\n\n\n
      .box<\/span> {\n  width<\/span>: 100px<\/span>;\n  min-height<\/span>: 100px<\/span>;\n  img {\n    width<\/span>: 200%<\/span>;\n    ...\n  }\n  &:nth-of-type(2)<\/span> { \/* the second box *\/<\/span>\n    contain<\/span>: size; \n    ...\n  }\n  ...\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n