CSS intrinsic-size

The intrinsic-size property allows developers to specify a placeholder size which would be used instead of sizing based on children. With intrinsic-size specified, elements lay out as if they had a single child with fixed size (specified by intrinsic-size).

The motivation for the property is to provide a placeholder sizing for subtree content which is either not yet available or not rendered. There is currently no way to provide this, other than sizing the element itself which may not be desirable as it affects how the element lays out in its container.

Demos

• https://wicg.github.io/display-locking/sample-code/intrinsic-size-block-flow-examples.html
• https://wicg.github.io/display-locking/sample-code/intrinsic-size-flexbox-examples.html

Documentation

• https://github.com/WICG/display-locking/blob/master/explainer-intrinsic-size.md
• https://github.com/w3c/csswg-drafts/issues/4229

Specification

Editor's draft

Status in Chromium

Blink components: Blink>Layout

Behind a flag (tracking bug) in:

• Chrome for desktop release 80
• Chrome for Android release 80

Consensus & Standardization

• Firefox: Public support
• Edge: Public support
• Safari: Public support
• Web Developers: Positive

Owners

• vmpstr@chromium.org
• tabatkins@chromium.org
• chrishtr@chromium.org

Intent to Prototype url

Last updated on 2019-11-18