Re: [csswg-drafts] [css-flexbox] Change content-size suggestion to min-intrinsic instead of min-content? (#6794)

In <https://github.com/w3c/csswg-drafts/issues/6794#issuecomment-1005344637>, 
@dgrogan brought up the following example:

```htmlmixed=
<div style="display: flex; flex-direction: column; height: 0px;">
  <div style="aspect-ratio: 1/1; width: 100px; border: 5px solid orange;">
    <div style="height: 200%; background: blue;"></div>
  </div>
</div>
```

Chrome's behavior here is correct. The min-content contribution of the blue box is zero due to the cyclic percentage size rules in <https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution>. So the flex base size is 100px (from the transferred width), and the automatic minimum size is zero, resulting in a 100px hypothetical main size.

Then, since the flex container is 0px tall and the item is flexible, it shrinks down to its minimum size (0px). The blue box's percentage then resolves against that zero during layout, so the blue box is also zero.

Firefox renders this with a 200px tall orange box, and a 400px tall blue box, which means in their implementation the percentage is looping and self-applying,
and just happens to be cut off on two applications.
This is because they are not applying the cyclic percentage rules
while calculating the orange box's automatic minimum height:
they are allowing the blue box's percentage
to resolve against the orange box's 100px automatic height,
resulting in the orange box getting an automatic minimum height of 200px.
The orange box then can't shrink below that,
so during layout the blue box resolves its percentage against the 200px height,
giving it a final height of 400px.

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


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

Received on Monday, 31 January 2022 20:33:43 UTC