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

#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;
}

Browser Support

The following table will show you the current browser support for the CSS contain-intrinsic-block-size property.

Desktop
Edge Chrome Firefox Opera Safari
95951078117
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
9510767171795

Last updated by CSSPortal on: 31st December 2023