CSS contain-intrinsic-size Property

Description

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.

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

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

<script>

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;

});

</script>

CSS

#contained_element {
  border: 2px solid green;
  width: 120px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

Result

Editor