CSS contain-intrinsic-width Property

The contain-intrinsic-width property provides a hint to the user agent about an element's intrinsic inline size (width) to be used when CSS containment prevents the browser from computing that size from the element’s normal contents. When an element is subject to containment, the rendering engine may not be allowed to inspect descendants to determine intrinsic dimensions; this property supplies a fallback intrinsic width so layout algorithms can proceed without expensive layout reads. It’s a tool for stabilizing layout decisions and avoiding layout jumps when content is hidden behind containment boundaries.

Because the value acts as an intrinsic-size hint rather than an absolute override, it is consulted by the browser during intrinsic sizing and min/max calculations. The hint is used by the algorithms that compute min-content, max-content and preferred sizes, which in turn affect how an element participates in flex, grid and block formatting contexts. This property is most useful where the UA needs an intrinsic inline size but containment or replaced content prevents deriving one directly; it works alongside containment behavior controlled by contain and should be thought of as part of the same containment/intrinsic-size toolset.

In practical terms, contain-intrinsic-width pairs naturally with vertical intrinsic hints such as contain-intrinsic-height and with aspect-ratio constraints like aspect-ratio. When an aspect ratio or the paired intrinsic height is present, the UA can reconcile the width hint with those constraints to produce consistent used sizes. Author-supplied intrinsic hints are particularly helpful for images, iframes or components rendered off-thread (or hydrated later) because they let you reduce content reflow without resorting to explicit sizing. If you already set explicit box sizes, the hint is simply an aid to intrinsic calculations and does not supersede explicit rules such as width or height, but it can significantly improve stability and performance when used appropriately.