The contain-intrinsic-size CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Keyword values */ contain-intrinsic-width: none; /* <length> values */ contain-intrinsic-size: 1000px; contain-intrinsic-size: 10rem; /* width | height */ contain-intrinsic-size: 1000px 1.5em; /* auto <length> */ contain-intrinsic-size: auto 300px; /* 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;
Values
Either one or two of the following values may be specified for an element. If two values are specified, the first value applies to the width, and the second to the height. If a single value is specified, it applies to both width and height.
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 <length>-
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>.
Description
The property is commonly applied alongside elements that can trigger size containment, such as contain: size and content-visibility.
Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
The contain-intrinsic-size property allows authors to specify an appropriate value to be used as the size for layout.
The auto <length> value allows the size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified length when the element is skipping its contents.
This allows offscreen elements with content-visibility: auto to benefit from size containment without developers having to be as precise in their estimates of element size.
The remembered value is not used if the child elements are being rendered (if size containment is enabled, the <length> will be used).
Examples
Setting the intrinsic size
This example provides selection lists that can be used to modify contain-intrinsic-size, content-visibility and contain on an element in order to observe the effect of the different settings.
CSS
#contained_element {
border: 2px solid green;
width: 120px;
}
.child_element {
border: 1px solid red;
background: blue;
height: 50px;
width: 150px;
}
JavaScript
The code below adds styles to, and removes styles from, the containing element based on the selected options.
const containedElement = document.querySelector("#contained_element");
const intrinsicSizeSelector = document.querySelector(
"#contain_intrinsic_size_selector",
);
const containSelector = document.querySelector("#contain_selector");
const contentVisibilitySelector = document.querySelector(
"#content_visibility_selector",
);
containedElement.style["contain-intrinsic-size"] =
intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
containedElement.style["contain"] =
containSelector.options[containSelector.selectedIndex].text;
containedElement.style["content-visibility"] =
contentVisibilitySelector.options[
contentVisibilitySelector.selectedIndex
].text;
intrinsicSizeSelector.addEventListener("change", () => {
containedElement.style["contain-intrinsic-size"] =
intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
});
containSelector.addEventListener("change", () => {
containedElement.style["contain"] =
containSelector.options[containSelector.selectedIndex].text;
});
contentVisibilitySelector.addEventListener("change", () => {
containedElement.style["content-visibility"] =
contentVisibilitySelector.options[
contentVisibilitySelector.selectedIndex
].text;
});
HTML
The HTML defines two buttons, a container element that is subject to containment via the content-visibility property.
<p>
<label for="contain_intrinsic_size_selector">contain-intrinsic-size:</label>
<select id="contain_intrinsic_size_selector">
<option>none</option>
<option>40px 130px</option>
<option>auto 40px auto 130px</option></select
>;<br />
<label for="contain_selector">contain:</label>
<select id="contain_selector">
<option>none</option>
<option>size</option>
<option>strict</option></select
>;<br />
<label for="content_visibility_selector">content-visibility:</label>
<select id="content_visibility_selector">
<option>visible</option>
<option>auto</option>
<option>hidden</option></select
>;
</p>
<div id="contained_element">
<div class="child_element"></div>
</div>
Result
Use the selectors to apply the given styles to the containing div element.
Note that when content-visibility is visible or auto, changing contain-intrinsic-size makes no difference.
However if the content is hidden, having a contain-intrinsic-size of none collapses the parent element as though its child element had no size.