contain-intrinsic-inline-size

Defines the placeholder inline-size (width) of an element when it is under size containment, preventing layout instability.

Quick example

.dynamic-width-element {
  content-visibility: auto;
  /* Reserves width for off-screen element */
  contain-intrinsic-inline-size: 100%;
}

Quick facts

Initial value
none
Inherited
No
Applies to
elements for which size containment can apply
Animation type
byComputedValueType

Values

autonone

contain-intrinsic-inline-size Browser Support

Newly available Since 2023 93% global usage

Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Works in all modern browsers. May need a fallback for older browsers.

95+
107+
17+
95+
ESC