contain-intrinsic-height

Sets the placeholder height for an element under size containment. It ensures the element occupies space even if its content isn't being rendered yet.

It is documented as part of the CSS Box Sizing specification.

/* Usage Example */
.lazy-card {
  content-visibility: auto;
  /* Reserves space to prevent page jumping */
  contain-intrinsic-height: 300px;
}

/* Syntax */
contain-intrinsic-height: auto;
contain-intrinsic-height: none;

/* Global values */
contain-intrinsic-height: inherit;
contain-intrinsic-height: initial;
contain-intrinsic-height: revert;
contain-intrinsic-height: revert-layer;
contain-intrinsic-height: unset;
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+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC