CSS contain-intrinsic-height Property

Description

The contain-intrinsic-height property provides an element-level intrinsic block-size (height) that the browser can use when the element’s own contents are not available to the sizing algorithms. In layouts where containment prevents the element from contributing intrinsic size information to ancestors or to percentage/auto sizing calculations, this property supplies a fallback height that the UA can treat as the element’s intrinsic block-size for the purposes of layout resolution. It is therefore a way to communicate an expected block-size to the layout system without exposing or measuring the actual inner content.

This intrinsic height influences how the element participates in several parts of the sizing process: it is consulted when the layout engine must determine a height but cannot derive one from content because of containment, and it can be used when resolving percentage-based block sizes on descendants or when establishing baseline positions in some formatting contexts. Because it is an intrinsic hint rather than an override, explicit dimension constraints or other layout rules still take precedence; the value supplied here only steps in where the content-based intrinsic information would otherwise be missing. For a shorthand that can set intrinsic sizes on both axes together, see contain-intrinsic-size.

This property is most useful in conjunction with explicit containment: when an element uses the containment mechanisms declared via contain, its internal content is isolated from ancestor sizing calculations and so providing an intrinsic height can prevent collapses and unexpected layout shifts. It also interacts with explicit sizing constraints such as height and min-height: those properties still determine final used sizes when present, while the intrinsic height influences situations where sizes would otherwise be unresolved. In practice, it’s commonly used to reduce layout instability (for example during progressive content loading) and to make containment-friendly components behave predictably in the broader page flow.

Definition

Initial value: none
Applies to: elements for which size containment can apply
Inherited: no
Computed value: as specified, with lengths values computed
Animatable: by computed value type
JavaScript syntax: object.style.containIntrinsicHeight

Syntax

contain-intrinsic-height: auto? [ none | <length> ]

Values

auto? [ none | <length> ]If auto is specified and the element has a last remembered size and is currently skipping its contents, its explicit intrinsic inner size in the corresponding axis is the last remembered size in that axis. Otherwise, the corresponding axis either doesn’t have an explicit intrinsic inner size (if none is specified) or has an explicit intrinsic inner size of the specified <length>.

Example

HTML

<div class="example">

  <h2>contain-intrinsic-height example</h2>

  <div class="card">

    <div class="contained" role="region" aria-label="Contained panel">

      <h3>Contained panel</h3>

      <p>

        This panel has a lot of content that would normally make it tall. With

        containment and an intrinsic height provided, the browser can reserve

        space without measuring all descendants.

      </p>

      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec

        odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla

        quis sem at nibh elementum imperdiet.

      </p>

      <p>

        Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper

        porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

      </p>

      <p>

        Additional content to demonstrate overflow when contents exceed the

        intrinsic height set on the container.

      </p>

    </div>

    <p class="note">The .contained element uses contain-intrinsic-height to establish its height.</p>

  </div>

</div>

CSS

/* Basic page styling */
.example {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #222;
  padding: 24px;
  background: #f7f8fb;
  min-height: 100vh;
}

h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
}

.card {
  max-width: 520px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20, 24, 40, 0.06);
  padding: 16px;
  border: 1px solid rgba(16, 24, 40, 0.04);
}

/* The important part: containment + intrinsic height */
.contained {
  /* Enable containment so the element can be sized independently of its descendants */
  contain: size layout paint;

  /* Provide an intrinsic height used when the UA cannot compute size from contents */
  contain-intrinsic-height: 180px;

  /* Optional intrinsic width if desired */
  contain-intrinsic-width: auto;

  /* Visual styling */
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border-radius: 6px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);

  /* Show overflow to demonstrate content exceeding the intrinsic height */
  overflow: auto;
}

.contained h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

.contained p {
  margin: 0 0 10px 0;
  line-height: 1.4;
  font-size: 13px;
  color: #333;
}

.note {
  margin-top: 12px;
  font-size: 12px;
  color: #556;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS contain-intrinsic-height property. Hover over a browser icon to see the version that first introduced support for this CSS property.