contain-intrinsic-block-size
Defines the 'placeholder' block-size (height) of an element when it is subject to size containment (e.g., when off-screen). This prevents layout shifts when content loads or scrolls into view.
Quick example
.heavy-section {
content-visibility: auto;
/* Reserves 500px of height for the off-screen content */
contain-intrinsic-block-size: 500px;
}Quick facts
Initial value
noneInherited
No
Applies to
elements for which size containment can apply
Animation type
byComputedValueType
Values
autonone contain-intrinsic-block-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+