w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 660 forks source link

[css-sizing] Proposal: `default-width` CSS property #10282

Open benface opened 5 months ago

benface commented 5 months ago

The problem

It is impossible to write a CSS component that:

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 https://github.com/w3c/csswg-drafts/issues/3226#issuecomment-1222926779

benface commented 3 months ago
  • 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).