Widely availableSupported across all major browsers. Safe to use in production.
Layout Widely available

contain-intrinsic-size

The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.

Layout

Overview

The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contain-intrinsic-block-size
95
95
107
17
95
17
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
Other
css.properties.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.
83
83
107
17
83
17
CSS property
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)

Syntax

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

Live demo

auto 500px

CSS Auto 500px demo.

PreviewFullscreen

Lock200px

CSS Lock200px demo.

PreviewFullscreen

width and heightindividualspecified

CSS width and heightindividualspecified demo.

PreviewFullscreen

Use cases

  • Using contain-intrinsic-size

    The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features