Skip to content

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

Closed
@davidsgrogan

Description

@davidsgrogan

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:

  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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions