The property is commonly applied alongside elements that can trigger size containment, such as contain: size
and content-visibility
.
Size containment allows a user agent to lay out an element as though it had a fixed size. This prevents unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents and may collapse the layout in the same way as if the contents had no width or height. The contain-intrinsic-block-size
property allows authors to specify an appropriate value to be used as the block-size for layout.
The auto <length>
value allows the block-size of an element to be stored if the element is ever "normally rendered" (with its child elements) and then used instead of the specified value when the element does not have any content. This allows offscreen elements with content-visibility: auto
to benefit from size containment without developers having to be precise in their estimates of element size. The remembered value is not used if the child elements are being rendered; if size containment is enabled, the <length>
value will be used.