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.
Syntax
/* 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;
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.
95+
107+
17+
95+