Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] Automatic minimum sizes should never force grid items to become bigger than the tracks they span #3705

Loirooriol opened this issue Mar 4, 2019 · 1 comment


None yet
2 participants
Copy link

commented Mar 4, 2019 says

to prevent the content-based minimum size from forcing overflow of its fixed-size grid area, if in a given dimension the grid item spans only grid tracks that have a fixed max track sizing function, then [... the content-based minimum size is ...] further clamped to less than or equal to the stretch fit into the grid area’s maximum size in that dimension, as represented by the sum of those grid tracks’ max track sizing functions

In fact this is not correct. I agree that clamping by the sum of max track sizes seems a good heuristic, but not doing so wouldn't force the item to overflow its fixed-size grid area. That's because the content-based minimum size is only used when an item spans a track with an auto min track size, and if all spanned tracks have a fixed max track sizes then they are not flexible. Therefore, ensures the sum of the spanned track sizes will at least be the minimum contribution of the item, which is greater or equal than the outer size given by the minimum size. So not clamping would just imply that both the item and the tracks it spans would be larger, but no overflow.

So the paradox is that when there is clamping, it's not actually needed to prevent overflow; but when there is no clamping because some track doesn't have a fixed max size, then the automatic minimum size may force a grid item to become bigger than the tracks it spans.

Basically, this happens when


<div id="grid">
  <div id="item"></div>
#grid {
  display: grid;
  width: 0;
  grid-template-columns: auto minmax(0px, 1fr);
#item {
  grid-column: 1 / 3;
  background: cyan;
#item::before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;

The automatic minimum width is 100px, but both columns are 0px wide, so the item is forced to overflow. This seems bad, in order to prevent it, consider dropping

distributing space only to flexible tracks (i.e. treating all other tracks as having a fixed sizing function of their current base size)

at least in case all spanned flexible tracks have a fixed min track sizing function.


This comment has been minimized.

Copy link

commented Jun 6, 2019

Here's the comment summarizing the principles that led to the text handling flexible tracks: #2177 (comment)

As far as we can tell, there are two principles here that we want to follow:

  • Flexible tracks absorb spanning items' content, leaving auto tracks tightly-wrapped around their contents insofar as possible. (See #2177 (comment))
  • Content-sized tracks such as auto tracks and flexible tracks with a minimum (e.g. minmax(min-content, 1fr) honor their minimum and ensure that no item spanning them causes overflow.

fantasai added a commit that referenced this issue Jun 6, 2019

[css-grid-1] Since auto minimum is clamped even in cases where it wou…
…ldn't trigger overflow, elide the informative text stating that purpose from the sentence describing the clamping. Requested by Oriol. #3705

fantasai added a commit that referenced this issue Jun 6, 2019

[css-grid-1] Handle flexible tracks with fixed minimums similar to fi…
…xed tracks, to make sure spanning items get accommodated by the intrinsic tracks they cross. #3705

@Loirooriol Loirooriol closed this Jun 6, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.