contain-intrinsic-block-size

The contain-intrinsic-block-size CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.

Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal writing mode like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension.

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.

Syntax example: contain-intrinsic-block-size: none;