Skip to content

Navigation Menu

Sign in
Appearance settings
Sign up
Appearance settings

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

Copy link
Copy link

Description

@Loirooriol
Issue body actions

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?

Reactions are currently unavailable

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.