CSS properties - contain-intrinsic-size

revision: February 14, 2026

CSS "contain-intrinsic-size" property

- this CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.

- it is a companion/safety net for the "contain: size" directive. They work together to solve a critical problem: "size containment" can cause elements to collapse to 0×0 without explicit dimensions.

code:
        .widget {
            contain: size;
            contain-intrinsic-size: 300px 200px; /* ✅ Reserve 300×200 space */
        }
    

"contain-intrinsic-size" provides a fallback/placeholder size that the browser uses for layout when content hasn't loaded yet (lazy images, async widgets), children are hidden or empty, size containment prevents child-based sizing

- it is a shorthand for the following CSS properties: "contain-intrinsic-width", "contain-intrinsic-height"

Syntax : contain-intrinsic-size = [ [ auto | from-element ]? [ none | ] ]{1,2}

Property values:

none : the element has no intrinsic size in the given dimension(s).

length : the element has the specified <length> in the given dimension(s).

auto [ | 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 <length>. 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).

If one value is provided as a keyword, a length or an auto [<length> | none] pair, it applies to both width and height.

Two length values may be specified, which apply to the width and height in that order. If two auto [<length> | none] pairs are specified, the first pair applies to the width, and the second to the height.

Syntax examples

            /* Keyword values */
            contain-intrinsic-size: none;

            /*  values */
            contain-intrinsic-size: 1000px;
            contain-intrinsic-size: 10rem;

            /* width | height */
            contain-intrinsic-size: 1000px 1.5em;

            /* auto  */
            contain-intrinsic-size: auto 300px;
            contain-intrinsic-size: auto none;

            /* auto width | auto height */
            contain-intrinsic-size: auto 300px auto 4rem;

            /* Global values */
            contain-intrinsic-size: inherit;
            contain-intrinsic-size: initial;
            contain-intrinsic-size: revert;
            contain-intrinsic-size: revert-layer;
            contain-intrinsic-size: unset;
        

JacaScript syntax : object.style.containIntrinsicSize = "value";

examples

code:
            <div id="container">
                <div id="auto-length-note">
                    <p>Your browser does not support
                        <code>contain-intrinsic-size: auto <length></code>.
                    </p>
                </div>
                <div class="auto-length">
                    <p>Item one</p>
                </div>
                <div class="auto-length">
                    <p>Item two</p>
                </div>
                <div class="auto-length large-intrinsic-size">
                    <p class="small">Item three</p>
                </div>
                <div class="auto-length large-intrinsic-size">
                    <p class="small">Item four</p>
                </div>
                <div id="auto-none-note">
                    <p>Your browser does not support
                    <code>contain-intrinsic-size: auto none</code>.
                    </p>
                </div>
                <div class="auto-length none">
                    <p>Item five</p>
                </div>
                <div class="auto-length none">
                    <p>Item six</p>
                </div>
            </div>
            <style>
                #container p { height: 100px;  width: 200px; border: 4px dotted; background: lightblue;}
                .auto-length { content-visibility: auto; contain-intrinsic-size: auto 100px; background-color: linen; 
                    outline: 4px dotted blue;}
                .large-intrinsic-size { /* Setting an inaccurate intrinsic size for the element */ 
                    contain-intrinsic-size: auto 200px; background-color: lightgray;
                outline: 4px dotted red;}
                .small { /* This element is a lot smaller than expected */ height: 50px; width: 50px; }
                .none { background-color: papayawhip; contain-intrinsic-size: auto none; outline: 4px dotted red;
                }
            </style>
        

code:
            <div class="gallery">
                <div class="image" style="background-image: url('../../images/1.jpg');"></div>
                <div class="image" style="background-image: url('../../images/2.jpg');"></div>
                <div class="image" style="background-image: url('../../images/3.jpg');"></div>
            </div>
            <style>
                .gallery {  display: flex;flex-wrap: wrap; }
                .image { width: 200px;  height: 150px; background-size: cover; contain: layout style;  
                    contain-intrinsic-size: 200px 150px; /* width height */  margin: 10px;}
            </style>