[csswg-drafts] [css-sizing-4][css-flexbox] How to determinate the content-based minimum sizes when applying aspect-ratio on the flex container (#5406)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing-4][css-flexbox] How to determinate the content-based minimum sizes when applying aspect-ratio on the flex container ==
This question is from the tentative [wpt](https://github.com/web-platform-tests/wpt/blob/master/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.tentative.html) (note: its expected result is a 100x100 green square):
```
<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 200px; aspect-ratio: 4/1;">
  <div style="background: green; width: 100px; height: 50px;"></div>
  <div style="background: green; width: 100px; height: 50px;"></div>
</div>
```
This is a little be unclear to me about how to apply automatic content-based minimum sizes (from [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum)) on the flex container.

Based on the spec in [[css-sizing-4]](https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum):
> In order to avoid unintentional overflow, the automatic minimum size in the ratio-dependent axis of a box with a preferred aspect ratio that is neither a replaced element nor a scroll container is its min-content size clamped from above by its maximum size.

It seems this rule also applies to the flexbox. So, based on this rule and [flex layout algorithm in [css-flexbox]](https://drafts.csswg.org/css-flexbox-1/#algo-main-container), if the main size of the flex container is computed by aspect-ratio, we may have to increase the main size based on its content, right?

So the questions are:
* Do we just use the _outer hypothetical main size_ of each flex item to calculate the main size, and compare this with the main size of the flex container from aspect-ratio (i.e. `flexContainerMainSize = std::max(mainSizeFromContent, mainSizeFromAspectRatio)`)?
* What happens if those flex-items don't have definite used flex basis? Should we treat all of them as min-content, and get the min-content main size for the flex container, and then compare this with the main size of the flex container (from aspect-ratio)? This may do multiple times for flex layout.
* Or maybe we don't have to apply this rule to the flex container because this is not unintentional overflow?

I'm not sure which way is reasonable for flexbox, or maybe I miss something.

Perhaps we should address/insert a new step in which we take automatic content-based minimum sizes (for aspect-ratio) on the flex container into account, in [flex layout algorithm in [css-flexbox]](https://drafts.csswg.org/css-flexbox-1/#layout-algorithm). Thanks.

cc @fantasai @bfgeek @dholbert @cbiesinger

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


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

Received on Thursday, 6 August 2020 22:00:01 UTC