Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[css-grid] minmax(auto,min-content) under a max-content constraint #3565

@Loirooriol

Description

@Loirooriol

Consider this grid: https://jsfiddle.net/xnvrk7h8/

.grid {
  display: grid;
  grid: auto / minmax(auto, min-content);
  float: left;
  border: 3px solid;
}
.item {
  background: blue;
}
.float {
  float: left;
  width: 50px;
  height: 50px;
}
<div class="grid">
  <div class="item">
    <div class="float"></div>
    <div class="float"></div>
  </div>
</div>

float: left sizes the grid under a max-content constraint (assuming the window is wide enough).

The grid item has a max-content width of of 100px when the floats are in the same line, and a min-content of 50px when they are in different lines.

According to https://drafts.csswg.org/css-grid/#algo-single-span-items,

If the track has an auto min track sizing function and the grid container is being sized under a min/max-content constraint, set the track’s base size to the maximum of its items’ min/max-content contributions, respectively, each limited by the max track sizing function if that is fixed and ultimately floored by its minimum contribution.

The track does have an auto min track sizing function and the grid container is being sized under a max-content constraint. So the track’s base size should be set to 100px. This is not limited by min-content because it's not fixed, and the minimum contribution is less than 100px:

The minimum contribution of an item is the outer size that would result from assuming the item’s used minimum size (min-width or min-height, whichever matches the relevant axis) as its preferred size (width or height, whichever matches the relevant axis) if its computed preferred size behaves as auto, or else the item’s min-content contribution.

Here the computed width is auto, and the used value of min-width: auto is the content size suggestion, 50px.

If the track has a min-content max track sizing function, set its growth limit to the maximum of the items’ min-content contributions.

So the growth limit is initially set to 50px, but

if a track’s growth limit is now less than its base size, increase the growth limit to match the base size.

So both the base size and the growth limit should be 100px, the track is frozen, and the rest of the algorithm doesn't seem relevant.

However, this is not what implementations do:

results

Note that in Firefox the column is 50px wide but the grid container is 100px wide, so strange, @MatsPalmgren. This is solved by using min-width: 0 in the grid item, which alters the minimum contribution but shouldn't affect the result.

Is my understanding of the spec correct? Should it be changed to match implementations?

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