What Is CSS contain: size and Why Elements Collapse

The CSS contain: size property is a performance optimization tool that isolates an element's size calculation from its child contents. Applying this property tells the browser to compute the element's layout without examining its children, which drastically improves rendering performance. However, because the browser ignores the intrinsic dimensions of descendant elements, the target element collapses to a width or height of zero unless explicit dimensions or fallback sizing values are defined.

What is contain: size?

The contain property is part of the CSS Containment specification. Its primary purpose is to decouple an element's subtree from the rest of the document tree, limiting the scope of browser recalculations during layout and paint cycles.

When you declare contain: size, you establish size containment on the element. Under size containment:

• The element is laid out as if it has no contents.
• Changes to the size, layout, or content of child nodes do not trigger layout recalculations in the parent or ancestor elements.
• The element cannot derive its size from its descendants.

Why Elements Collapse Without Explicit Dimensions

Normally, HTML elements rely heavily on intrinsic sizing. A standard <div>, for example, expands vertically to fit the height of its text and child elements, and may expand horizontally depending on display rules.

When you apply contain: size, the browser intentionally ignores the size of all descendants when calculating the parent element's box dimensions. Because the browser treats the element as though it contains nothing:

1. Block-axis collapse: The height collapses to 0px because there is no explicit height declared, and intrinsic content height cannot be read.
2. Inline-axis collapse: If the element is an inline-block, float, or flex/grid item with an automatic width, the width will also collapse to 0px. A standard block element may still stretch to fill the horizontal width of its parent, but its vertical height will remain 0px.

Consequently, visually, the element appears to vanish or overlap with adjacent content.

How to Prevent Collapsing

To use contain: size effectively without collapsing your layout, you must provide sizing information that does not depend on the element's children.

1. Set Explicit Dimensions

Define fixed or relative sizes directly on the contained element using standard layout properties:

.container {
  contain: size;
  width: 100%;
  height: 400px;
}

You can also use properties like min-height, min-width, or aspect-ratio to establish non-zero bounds.

2. Use contain-intrinsic-size

The CSS contain-intrinsic-size property acts as a placeholder size specifically for elements under size containment. It provides a synthetic intrinsic dimension so the element maintains space on the page without inspecting the DOM tree of its children:

.container {
  contain: size;
  contain-intrinsic-size: 1000px 500px; /* width height */
}

Modern browsers also support the auto keyword with contain-intrinsic-size, which remembers the last rendered size of the element when it was visible, preventing layout shifts when elements move on and off the screen:

.container {
  contain: size;
  contain-intrinsic-size: auto 500px;
}

When to Use contain: size

Use contain: size when:

• You are building virtualized lists or infinite scroll feeds where off-screen components should not trigger costly layout recalculations.
• The dimensions of the container are strictly known beforehand via design constraints or aspect ratios.
• You are leveraging content-visibility: auto, which automatically applies size containment when elements are off-screen to improve initial page load performance.