CODEWITHSUNDEEP
htmlcsscss-grid
NickW
NickW

Reputation: 1333

Understanding overflow / minmax behaviour in CSS grid

TLDR: Codepen of nested grid overflowing and not being fixed by using grid-template-columns: repeat(16, minmax(0,1fr));

So I've an element container, with two main elements, summary-wrapper and stats-wrapper

container has the following grid:

.container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);

    column-gap: 4rem;
    row-gap: 4rem;
    padding: 5rem;
    width: 100%;
}

summary-wrapper is placed at grid-column: 1/11; (line 96) and stats-wrapper at grid-column: 11/17; (line 25)

In my mind, changing the grid column of the stats-wrapper to grid-column: 12/17 should just move the start of the element, which it does in Chrome:

Chrome (no overflow):

chrome grid-column change

But in Firefox:

Firefox grid-column change

Now the behaviour being different between browsers seems a bit weird, but doesn't really change the fact that my mental model for how grid containers works is just... wrong - and I've experienced (and am experiencing in my project) this behaviour in Chrome, so that's not really the focus of my question.

I've had this issue before, but with inputs, and was directed to this answer that allows longer elements to collapse using grid-template-columns: repeat(16, minmax(0,1fr));

This seems to work for the stats element (if you look the header no longer overflows the page). But because the contents of that element (excluding the header) are part of a nested grid too, I get the same problem, but it's not fixed using grid-template-columns: repeat(16, minmax(0,1fr)); (line 50) this time:

Firefox grid-column nested problem

I just find it very strange, as I can't see any reason why the elements (in either case) need to overflow. Even the fix using minmax(0,1fr) relies on the explanation that

1fr is equivalent to minmax(auto, 1fr)

and that auto is preventing the track being smaller than the item. But in this case (afaik) the items stats__section--viewed stats__section--applications and stats__section--trend have no min size, other than their text

I'm just stumped!

codepen

Any help appreciated!

Upvotes: 2

Views: 485

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371113

The reason for the overflow is a column-gap rule in the nested grid .stats__content.

.stats__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 4rem; <----- CULPRIT
  row-gap: 3rem;
  background-color: white;
  padding: 2rem 0.1rem 0.1rem 0.1rem;
}

Being that it's a fixed width, repeated 15 times (because gaps only go between tracks, not between tracks and container edges), an overflow is inevitable in this case.

(4rem) * (15 gaps) = 60rem of inflexible width

Reduce the number of gaps or find another solution for separating the items.

Upvotes: 1

Related Questions