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
autononecontain-intrinsic-block-size Browser Support
Widely availableSince 202393% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
83+
107+
17+
83+