Description
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 available width 75px gives the item a height of 100px. The container is 100px tall so this item fills an entire flex 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 150px > max-content size 100px
, which seems bad.
The problem is exacerbated if the container has column-gap > 0
.
<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:
- Give the items the same available inline space no matter if the flex container is being sized under a
min-content
ormax-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
- this would result in
- Floor
max-content
bymin-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