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>


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 link

Specification currently under development in a Working Group

Status in Chromium


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.


Search tags

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

Last updated on 2021-12-20