[css-sizing] Proposal: default-width CSS property

[benface]

The problem

It is impossible to write a CSS component that:

• has a default width, whether it's a fixed width or a keyword other than auto (e.g. 200px or fit-content)
• stretches properly when placed in a grid layout with justify-items: stretch, without any contextual override (i.e. no &:is(.grid > *) { width: auto; })

The solution

A new default-width property that defines the width of a width: auto element, while allowing it to stretch in a grid context.

Here's a Codepen that has a good visual explanation.

Related to #7427, and could fix #3226 (comment)

[benface]

• stretches properly when placed in a grid layout with justify-items: stretch, without any contextual override (i.e. no &:is(.grid > *) { width: auto; })

Note: this is also a problem with a column flex container (with the default align-items which stretches items horizontally).