← Back to release summary

Logical properties for contain-intrinsic-size

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 95)
Intent stage
Prepare to ship

Summary

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.

Standards & signals

View on chromestatus.com