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.
It is documented as part of the CSS Box Sizing specification.
Syntax
/* Usage Example */
.heavy-section {
content-visibility: auto;
/* Reserves 500px of height for the off-screen content */
contain-intrinsic-block-size: 500px;
}
/* Syntax */
contain-intrinsic-block-size: auto;
contain-intrinsic-block-size: none;
/* Global values */
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;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.
95+
107+
17+
95+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more