CSS contain-intrinsic-size Property

❮ Previous Reference Next ❯


.container {
  border: 2px solid green;
  width: 120px;
  content-visibility: visible;
  contain-intrinsic-size: 40px 130px;

.child {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;


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

This property is a shorthand for the following CSS properties:

Default value:none none
JavaScript syntax:
object.style.containIntrinsicSize="none|length|auto length|initial|inherit|revert|revert-layer|unset";

Standard Syntax

contain-intrinsic-size: none|length|auto length|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
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.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  contain-intrinsic-size: none none;
❮ Previous Reference Next ❯