W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2021

[csswg-drafts] [css-sizing] aspect-ratio elements can have conflicting min-content sizes (#6418)

From: davidsgrogan via GitHub <sysbot+gh@w3.org>
Date: Thu, 01 Jul 2021 01:05:26 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-934254429-1625101524-sysbot+gh@w3.org>
davidsgrogan has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] aspect-ratio elements can have conflicting min-content sizes ==
What is the min-content size of the outer element here?
```html
<div style="background: green; height: 100px; aspect-ratio: 1/2;">
  <div style="width: 100px;"></div>
</div>
```

https://drafts.csswg.org/css-sizing-3/#min-content says
> The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

That's clearly 100px for this case. The inner div would overflow with anything smaller.

&nbsp;  

But https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes says
> The min-content size of a box in each axis is the size it would have if it was a float given an auto size in that axis (and no minimum or maximum size in that axis) and if its containing block was zero-sized in that axis.

So, we can test that with the below [snippet](https://jsfiddle.net/dgrogan/uv59y0jh/1/). Correct me if I'm wrong, but I think 'no minimum or maximum size in that axis' can be represented with `min-width: 0px` and `max-width: none` based on the principle mentioned in the second paragraph of https://github.com/w3c/csswg-drafts/issues/5032#issuecomment-651402662.

```html
<div style="width: 0px">
  <div style="background: green; height: 100px; aspect-ratio: 1/2; min-width: 0px; max-width: none; float: left;">
    <div style="width: 100px;"></div>
  </div>
</div>
```

Both Firefox and Chrome give the green block a 50px width. So 50px is the min-content size. But that's different than the 100px https://drafts.csswg.org/css-sizing-3/#min-content gave us.

I think https://github.com/w3c/csswg-drafts/issues/5032 intended for this case to have a 50px min-content size.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6418 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 1 July 2021 01:05:28 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:38 UTC