CSS contain-intrinsic-width and height for Layout Stability

The CSS contain-intrinsic-width and contain-intrinsic-height properties specify fallback dimensions for elements affected by size containment, preventing drastic layout shifts when elements are not actively rendered. When used alongside performance-optimizing properties like content-visibility: auto, these intrinsic dimensions act as placeholders, preserving the layout structure and scrollbar stability before off-screen content is calculated and painted.

The Layout Shift Problem with Size Containment

When developers apply content-visibility: auto to optimize rendering performance, the browser skips rendering off-screen elements until they approach the viewport. Because rendering is skipped, the browser treats the element as having no contents, effectively collapsing its height or width to zero if no explicit dimensions are set.

As a user scrolls down the page, these elements enter the viewport, calculate their real contents, and expand. This sudden expansion causes Cumulative Layout Shift (CLS), which degrades the user experience, destabilizes the scrollbar position, and hurts Core Web Vitals scores.

How contain-intrinsic-width and contain-intrinsic-height Work

The contain-intrinsic-width and contain-intrinsic-height properties resolve this issue by reserving space for elements subjected to size containment. Instead of collapsing to zero, an element with size containment assumes the intrinsic dimensions specified by these properties.

• contain-intrinsic-width: Sets the fallback width of the element when size containment is active.
• contain-intrinsic-height: Sets the fallback height of the element when size containment is active.

Once the element enters the viewport and is rendered, the browser replaces these intrinsic values with the actual rendered dimensions of the content.

Syntax and Shorthand

You can define width and height individually or use the contain-intrinsic-size shorthand property:

/* Individual properties */
.card {
  content-visibility: auto;
  contain-intrinsic-width: 300px;
  contain-intrinsic-height: 200px;
}

/* Shorthand: width and height */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}

/* Shorthand: applies to both axes equally */
.square-card {
  content-visibility: auto;
  contain-intrinsic-size: 250px;
}

Dynamic Sizing with the auto Keyword

Guessing exact dimensions for responsive components can be difficult. To solve this, CSS supports the auto keyword paired with a fallback length:

.dynamic-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;
}

When using auto <length>, the browser starts by applying the specified fallback (e.g., 350px). Once the element renders for the first time, the browser records its actual rendered size. If the element later scrolls out of view and is discarded, the browser remembers the recorded size instead of reverting to the initial fallback, guaranteeing precise layout stability.

Key Benefits for Web Performance

• Eliminates Cumulative Layout Shift (CLS): Keeps layout structures predictable as off-screen components enter and exit the rendering tree.
• Maintains Scrollbar Accuracy: Prevents the scrollbar thumb from resizing erratically as users navigate through long-form content or infinite feeds.
• Enables Aggressive Rendering Optimizations: Allows safe use of content-visibility: auto across large documents without sacrificing visual stability.