You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
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.