CSS contain-intrinsic-size Property

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

contain-intrinsic-size

CSS PropertyThis property is supported by all modern browsers.

Updated 1st January 2026

Description

The contain-intrinsic-size property lets an element advertise a fallback intrinsic size to the layout system when its real intrinsic dimensions are unavailable or intentionally hidden by containment. In situations such as size containment or when a replaced element’s intrinsic dimensions aren’t used (for example while an image or iframe is still loading), this declared intrinsic size is what the browser treats as the element’s “natural” size for the purposes of layout calculation. That means the element can participate in intrinsic size algorithms without forcing the browser to measure or lay out its descendants, enabling predictable space reservation without the cost of full layout.

One important practical effect is on children and percentage-based sizing: when an element reports an intrinsic size, percentage-height or percentage-width on its descendants can resolve against that size rather than being left undefined or collapsing. This helps prevent unexpected collapse or growth of layout areas when contents are deferred. It also acts as a stable reference for computing the used size of boxes when other sizing constraints are absent or set to auto (for example instead of triggering reflow to discover content-driven size).

The property is also useful for minimizing content layout shifts and improving perceived performance. By reserving an appropriate intrinsic size ahead of content load, authors can avoid cumulative layout shift caused by late-loading images or embedded content. It complements strategies that intentionally limit or skip descendant layout (the performance benefits associated with containment) by providing a sensible, author-defined size to use in place of expensive measurements.

In terms of interaction with other sizing behavior, the intrinsic size you provide can influence how an element’s final used size is chosen alongside explicit constraints. For example, it is considered when resolving sizing in relation to contain, acts as a fallback reference for aspect-ratio, and comes into play when width or height are automatic or percentage-based. Set thoughtfully, it gives authors a lightweight way to stabilize layout without forfeiting the performance gains of containment.

Definition

Initial value: See individual properties
Applies to: elements for which size containment can apply
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.containIntrinsicSize

Syntax

contain-intrinsic-size: [ auto? [ none | <length> ] ]{1,2}

Values

noneThe element has no intrinsic size in the given dimension(s).
<length>The element has the specified <length> in the given dimension(s).
auto [<length> | none]A remembered value of the "normally rendered" element size if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified . The none keyword may be used in place of <length> where 0px fixed lengths behave differently than none (such as in multi column, or grid layouts).

Example

HTML

<div class="demo">

  <h2>contain-intrinsic-size demo</h2>

  <div class="media-placeholder" aria-hidden="true">

    <span class="label">Media placeholder</span>

  </div>

  <p class="note">The box above reserves space using contain-intrinsic-size while the real content loads.</p>

</div>

CSS

:root {
  --card-width: 100%;
  --card-max-width: 800px;
  --bg: #f7fbff;
  --accent: #3b82f6;
}

.demo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  max-width: var(--card-max-width);
  margin: 48px auto;
  padding: 20px;
  color: #0f172a;
}

.media-placeholder {
  width: var(--card-width);
  /* Enable size containment and provide an intrinsic size to reserve space */
  contain: size layout;
  contain-intrinsic-size: 640px 360px;
  background: linear-gradient(135deg, #eef6ff 25%, transparent 25%),
              linear-gradient(225deg, #eef6ff 25%, transparent 25%),
              var(--bg);
  background-size: 24px 24px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: block;
  box-shadow: 0 6px 18px rgba(11, 20, 40, 0.06);
}

.media-placeholder .label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
}

/* Responsive example: the intrinsic size will scale down on narrower viewports */
@media (max-width: 700px) {
  .media-placeholder {
    contain-intrinsic-size: 360px 202px;
  }
}

Result

Open in editor

Browser Support

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

This property is supported by all modern browsers.