CSS contain-intrinsic-block-size Property

Description

The contain-intrinsic-block-size property defines an element’s fallback intrinsic block dimension - in other words, a preferred block‑axis size that the UA can use when the element’s natural size can’t be determined from its children or intrinsic content. Because it targets the logical block axis, the effective direction of this size depends on the element’s writing mode and orientation (for example, it corresponds to height in horizontal-tb writing mode). It is intended as a hint for layout algorithms rather than an authoritative override, supplying a stable size for the block axis when intrinsic sizing information is otherwise unavailable.

This property becomes important in situations where an element is isolated from its children’s sizing information, for example when using CSS containment (see contain) or when the element is treated in a way that prevents the browser from measuring descendant content during certain layout passes. It pairs conceptually with its inline‑axis counterpart, contain-intrinsic-inline-size, so authors can provide a complete intrinsic footprint for both logical axes. When present, the block intrinsic size can be used as the basis for resolving auto sizes, computing percentage sizes of children, or providing an initial placeholder size before replaced content (like images) finishes loading.

Interactions with other sizing mechanisms are intentional: user agents may combine the intrinsic block hint with an explicitly provided aspect ratio (see aspect-ratio) to derive the corresponding inline size, or use it alongside min/max constraints to clamp final dimensions. Because it is only consulted by layout algorithms that need an intrinsic size, authors should not expect it to forcibly override explicit width/height constraints set elsewhere; rather, it fills gaps where no author-specified size exists and where measuring content has been intentionally restricted for performance or encapsulation.

Practically, contain-intrinsic-block-size is useful when you want predictable vertical space (in most writing modes) for components that are contained or whose content is expensive to measure - for example, lazy-loaded media, isolated widgets, or shadow-rooted components. By supplying a sensible intrinsic block size you can reduce layout reflows and cumulative layout shift, and make percentage‑based children behave consistently even when their parent’s content isn’t measured. Remember that it is effectively a hint to the UA’s sizing algorithms: it improves stability and predictability but does not necessarily act as a hard enforced dimension in every layout scenario.

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

Syntax

contain-intrinsic-block-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='example'>

    <div class='box normal'>

        <h3>Normal box</h3>

        <p>

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

            turpis sit amet urna tincidunt tincidunt. Pellentesque habitant morbi

            tristique senectus et netus et malesuada fames ac turpis egestas.

            Curabitur sit amet augue vitae velit gravida tincidunt. Vestibulum

            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia

            curae; Aenean euismod, nisl at convallis gravida, augue arcu

            ullamcorper tortor, nec dictum neque nunc eget urna.

        </p>

    </div>



    <div class='box contained'>

        <h3>Size-contained box</h3>

        <p>

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

            turpis sit amet urna tincidunt tincidunt. Pellentesque habitant morbi

            tristique senectus et netus et malesuada fames ac turpis egestas.

            Curabitur sit amet augue vitae velit gravida tincidunt. Vestibulum

            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia

            curae; Aenean euismod, nisl at convallis gravida, augue arcu

            ullamcorper tortor, nec dictum neque nunc eget urna.

        </p>

    </div>

</div>

CSS

/* Layout */
.example {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
}

/* Shared box styling */
.box {
    flex: 1 1 0;
    border: 1px solid #d3d7df;
    padding: 14px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

p {
    margin: 0;
    line-height: 1.5;
    color: #111827;
}

/* The demonstration of contain-intrinsic-block-size */
.contained {
    /* Make this element size-contained so the browser can't measure its intrinsic height
       from outside; contain-intrinsic-block-size provides a fallback block size */
    contain: size;

    /* Provide an intrinsic block size (height in a horizontal writing mode)
       used by the layout when the element is size-contained */
    contain-intrinsic-block-size: 140px;

    /* Allow internal scrolling so overflowing content stays accessible */
    overflow: auto;

    /* Slightly different background to highlight the contained box */
    background: #fff9f0;
}

/* The normal box grows to fit its content, for comparison */
.normal {
    background: #ffffff;
}

Result

Editor

Browser Support

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