CSS contain-intrinsic-inline-size Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The contain-intrinsic-inline-size property lets an author provide a fallback intrinsic inline dimension for an element that is isolated from normal layout measurement. In other words, when an element has containment that prevents the user agent from measuring its contents for intrinsic-size calculations, this property supplies a logical inline-size the UA can treat as the element’s intrinsic width for purposes of auto-sizing and intrinsic sizing steps. Because it is a logical property, its meaning adapts to writing mode: in horizontal text it corresponds to the horizontal axis, in vertical text to the vertical axis.

This property is primarily consulted during the CSS intrinsic sizing algorithm whenever the element’s real content metrics are unavailable due to containment (for example when using contain). It is not a hard override of an explicitly specified definite size - if the element has a definite width or inline-size, those definite values take precedence - but it does act as the intrinsic min/max/auto baseline the UA uses when resolving auto and intrinsic-dependent sizing such as track sizing in grids or flex item base sizes.

Practically, contain-intrinsic-inline-size is useful for components and isolated elements (web components, shadow roots, embedded widgets) where you want predictable layout behavior without exposing internals to the parent’s layout engine. Supplying an intrinsic inline size reduces layout jitter and gives the parent layout clearer information when computing min-content, max-content, and auto sizes, and it complements other constraints such as min-width. In short, it provides an author-controlled intrinsic fallback used only when the normal content-based measurements are intentionally blocked by containment.

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.containIntrinsicInlineSize

Syntax

contain-intrinsic-inline-size: 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="wrap">

  <h1>contain-intrinsic-inline-size demo</h1>



  <div class="layout">

    <section class="card contained">

      <h2>Contained card</h2>

      <p>

        This card uses CSS containment and sets an intrinsic inline size. The long

        content here will not force the card to grow horizontally because the

        element is size-contained and supplies an intrinsic inline size.

      </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>

    </section>



    <section class="card normal">

      <h2>Normal card</h2>

      <p>

        This card has no containment so its width responds to the content and

        the surrounding layout.

      </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>

    </section>

  </div>



  <p class="note">The left card sets contain-intrinsic-inline-size to 260px so it keeps a predictable inline size despite large content.</p>

</div>

CSS

/* Basic page styles */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f5f7fb;
  color: #0b1220;
  padding: 28px;
  margin: 0;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
}

h1 {
  font-size: 1.25rem;
  margin: 0 0 18px 0;
}

.layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(12, 24, 40, 0.06);
  flex: 1;
  min-width: 0; /* allow overflow/ellipsis in flex children */
}

.card h2 {
  margin: 0 0 8px 0;
  font-size: 1rem;
}

.card p {
  margin: 0 0 10px 0;
  line-height: 1.45;
  color: #263141;
}

/* The contained card: demonstrate contain-intrinsic-inline-size */
.card.contained {
  /* isolate size calculations from descendant content */
  contain: size inline-size;

  /* provide an intrinsic inline size to be used for layout
     when the element is size-contained */
  contain-intrinsic-inline-size: 260px;

  /* allow internal scrolling when content is larger than the intrinsic size */
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(15, 23, 34, 0.04);
}

/* Normal card for comparison */
.card.normal {
  border: 1px solid rgba(15, 23, 34, 0.06);
}

.note {
  margin-top: 14px;
  color: #475569;
  font-size: 0.9rem;
}

Result

Editor

Browser Support

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