contain-intrinsic-size | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`contain-intrinsic-size`	83	83	107	17	83	17
Other
`css.properties.contain-intrinsic-block-size` The contain-intrinsic-block-size CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.	95	95	107	17	95	17
CSS property
`none`	98	98	107	17	98	17
Other
`css.properties.contain-intrinsic-height` The contain-intrinsic-height CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment.	95	95	107	17	95	17
CSS property
`none`	98	98	107	17	98	17
Other
`css.properties.contain-intrinsic-inline-size` The contain-intrinsic-inline-size CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment.	95	95	107	17	95	17
CSS property
`none`	98	98	107	17	98	17
`auto none` `auto none` value	117	117	117	17	117	17
`none`	98	98	107	17	98	17
Other
`css.properties.contain-intrinsic-width` The contain-intrinsic-width CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment.	95	95	107	17	95	17
CSS property
`none`	98	98	107	17	98	17

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

CSS Auto 500px demo.

CSS Lock200px demo.

CSS width and heightindividualspecified demo.

Using contain-intrinsic-size

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.