CSS contain-intrinsic-inline-size Property

Description

The contain-intrinsic-inline-size CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment. Inline-size is the size of the element in the dimension parallel to the flow of text within a line. In a horizontal writing mode like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical 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.containIntrinsicInlineSize

Syntax

contain-intrinsic-inline-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;
}