This converts contain-intrinsic-size to a shorthand and adds corresponding contain-intrinsic-{width,height} properties as well as contain-intrinsic-{inline,block} size. For example, this will make the following work: <div style="writing-mode: vertical-lr; contain: size; contain-intrinsic-inline-size: 100px; contain-intrinsic-block-size: 50px;"></div>

Motivation

For the common case of using c-i-s to provide a better scrollbar approximation for content-visibility: auto, being able to just specify an intrinsic height is helpful. And of course the logical versions make this easier for vertical writing mode pages. This also paves the way for contain-intrinsic-size: auto and will make 1d size containment work more straightforwardly and thus help with container queries.

Specification

Specification link


Specification currently under development in a Working Group

Status in Chromium

Blink>Layout


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Search tags

contain-intrinsic-size, contain intrinsic size, logical,

Last updated on 2021-09-04