CSS contain-intrinsic-block-size Property

Description

The contain-intrinsic-block-size CSS 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.

Initial value: none
Applies to: elements for which size containment can apply
Inherited: no
Computed value: as specified, with lengths values computed
Animatable: by computed value type
JavaScript syntax: object.style.containIntrinsicBlockSize

Syntax

contain-intrinsic-block-size: auto? [ none | <length> ]

Values

auto? [ none | <length> ]If auto is specified and the element has a last remembered size and is currently skipping its contents, its explicit intrinsic inner size in the corresponding axis is the last remembered size in that axis. Otherwise, the corresponding axis either doesn’t have an explicit intrinsic inner size (if none is specified) or has an explicit intrinsic inner size of the specified <length>.

Example

CSS

#contained_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}