- From: davidsgrogan via GitHub <sysbot+gh@w3.org>
- Date: Fri, 29 Oct 2021 01:47:29 +0000
- To: public-css-archive@w3.org
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