[csswg-drafts] [css-flexbox] column wrap intrinsic size algorithm can make inline min-content > max-content (#6777)

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

== [css-flexbox] column wrap intrinsic size algorithm can make inline min-content > max-content ==
https://drafts.csswg.org/css-flexbox/#intrinsic-cross-sizes

Flex's intrinsic cross size algorithm can lead to inline `min-content > max-content` for a column-wrap container.

In the example below, the two items are identical. They each have min/max-content contribution of 75px,100px.

To determine container's `max-content` size, we lay out each item with available width 100px[1]. The items' resulting heights are each 50px, so we can fit both of them in a single flex line of width 100px. So container's `max-content` size is 100px.

To determine container's `min-content` size, we lay out each item with available width 75px[1]. Laying out the first item with width:75px gives the first item a height of 100px. The container is 100px tall so this first item takes an entire line. item2 is forced into a second flex line. The width of each flex line is 75px, so container's `min-content` size is 150px.

So `min-content size > max-content size`, which seems bad.

The problem is exacerbated if the container has `column-gap > 0`.

```html
<div style="display: flex; flex-flow: column wrap; height: 100px">
  <div id=item1>
    <div style="display: inline-block; style="width: 75px; height: 50px;"></div>
    <div style="display: inline-block; style="width: 25px; height: 50px;"></div>
  </div>
  <div id=item2>
    <div style="display: inline-block; style="width: 75px; height: 50px;"></div>
    <div style="display: inline-block; style="width: 25px; height: 50px;"></div>
  </div>
</div>
```

Strawperson possible solutions:
 1. Give the items the same available inline space no matter if the flex container is being sized under a `min-content` or `max-content` constraint.
    * this would result in `min-content = max-content` for all column wrap containers
    * that seems suboptimal, but it's still an unequivocal improvement over what engines do today
 2. Floor `max-content` by `min-content`. I.e. `final max-content = max(min-content, max-content)`
    * seems kludgy

[1] From the spec link above:
> if the flex container is flex-flow: column wrap;, then it’s sized by first finding the largest min-content/max-content cross-size contribution among the flex items (respectively), then using that size as the available space in the cross axis for each of the flex items during layout.

/cc @bfgeek 

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


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

Received on Friday, 29 October 2021 01:47:38 UTC