contain-intrinsic-size
A shorthand property to set both the width and height an element should 'pretend' to have when it is under size containment. This is a game-changer for scroll performance.
Quick example
section {
content-visibility: auto;
/* Reserves 100% width and 400px height */
contain-intrinsic-size: 100% 400px;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
elements for which size containment can apply
Values
autonone contain-intrinsic-size Browser Support
Newly available Since 2023 94% 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.
83+
107+
17+
83+