Re: [csswg-drafts] [css-sizing] Intrinsic sizes for stretchable replaced elements (#13149)

So stretchable replaced elements weren't particularly well thought out, and somewhat compat constrained now (lots of people use SVGs for icons etc). The stretching behaviour should be considered a **last-resort** - e.g. nothing else makes resolved, so stretch.

Your proposal wrt. `width: 200px; max-width: min-content`, `width: 0; min-width: min-content`, `min-height: 150px; width: 200px; max-width: min-content`, etc doesn't make sense to me. E.g. the web-developer has placed an explicit width on the element, we should respect that.

> I'm not a fan of these keywords having different behaviors on different properties

Blink somewhat does what you describe, but not quite. We also don't treat the keywords differently depending on position.

For stretchable replaced-elements we have ~4 stages (its a little different for non-stretchable but it follows the same basic flow).

1. Compute the "block content" size - compute the block-size of the replaced element, ignoring the block-lengths (used for `min-block-size: max-content` etc). For the purposes of this stage (for stretchable replaced elements) "inline min/max content" sizes are treated as unresolvable/indefinite. This means that max-inline-size: min-content will resolve to Infinity, etc. If the inline-size is indefinite, at the very end we resolve it to stretch **if** nothing else resolved.
2. Compute the block-sizes (block-size, min-block-size, max-block-size) using the "block content" calculated above. E.g. in most layout modes `block-size: auto` is the same as `block-size: fit-content` so use the "block content" 
3. Compute the inline-sizes (inline-size, min-inline-size, max-inline-size). For this step the inline min/max content-sizes uses the calculated block-size reflected through the aspect-ratio.
4. Resolve the sizes, if we have no inline-size or block-size, we apply stretching as a last resort.

As an example for `width: 200px; max-width: min-content`
 - For (1) we resolve to 200px, max-width: min-content doesn't resolve.
 - For (2) the block-size resolves to 200px.
 - For (3) we resolve it to 200px.

A general replaced algorithm we do is:

1. Compute the min-block-size, block-size, and max-block-size - if ignoring block-lengths skip this step.
   For the purposes of computing the "block content" size:
     - If we have no aspect-ratio use the natural size (potentially the default natural size).
     - If we aren't ignoring any lengths, compute the block-size ignoring the block-lengths (step 1 above).
     - If we have a natural size, use that otherwise return indefinite (unresolvable).
2. Compute the min-inline-size, inline-size, and max-inline-size - if ignoring inline-lengths skip this step.
   For the purposes of computing the "inline content" size:
     - If we have no aspect-ratio use the natural size (potentially the default natural size).
     - If we have a block-size from step (1) use that.
     - If we aren't ignoring any lengths, compute the inline-size ignoring the inline-lengths.
     - If we have a natural size, use that otherwise return indefinite (unresolvable).
 3. If we have an aspect-ratio, and no resolved inline & block size at this stage, stretch if as a last resort if we can (otherwise zero, or default natural depending of if there is a percentage in inline-size for compat reasons).
 4. Resolve the size (if we have a resolved inline-size, calculate the block-size by reflecting through AR, if we have a block-size ditto, if neither use the natural-size clamped by the min/max sizes as appropriate).




-- 
GitHub Notification of comment by bfgeek
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13149#issuecomment-4146914054 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 28 March 2026 04:27:35 UTC