contain-intrinsic-inline-size

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

It is documented as part of the CSS Box Sizing specification.

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

/* Syntax */
contain-intrinsic-inline-size: auto;
contain-intrinsic-inline-size: none;

/* Global values */
contain-intrinsic-inline-size: inherit;
contain-intrinsic-inline-size: initial;
contain-intrinsic-inline-size: revert;
contain-intrinsic-inline-size: revert-layer;
contain-intrinsic-inline-size: unset;
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.

95+
107+
17+
95+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC