minmax() defaulting to max

Question

I tried to set minmax() for the grid-template-rows and interestingly enough, the outcome was that grid-rows extended to the max of the minmax() instead of min.

How could we make grid rows stay at the minimum declared size, and later if more content is added - the grid row would expand to the maximum declared size and not more?

Here is an example:

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
}

<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

Answer 1

In general, tracks will try to reach their max size:

If the free space is positive, distribute it equally to the base sizes of all tracks, freezing tracks as they reach their growth limits (and continuing to grow the unfrozen tracks as needed).

(In this context, "growth limit" is mostly a synonym for "max size in minmax()".)

This happens to usually be what you want the track to do.

To get the effect you're looking for, where it wraps tightly but won't go above a certain limit, you can tweak what you're doing a bit:

• use minmax(50px, min-content) on the row sizes; this'll wrap them tight to the contents, but won't let them shrink below 50px.
• use max-height: 150px on the actual grid items, so they'll max out at 150px.

These two together should achieve the effect you want.

Answer 2

It's clear that the major browsers default to the max value in the minmax() function.

The spec definition is not clear on how this matter – min or max default? – should be handled:

minmax()

Defines a size range greater than or equal to min and less than or equal to max.

If max < min, then max is ignored and minmax(min,max) is treated as min.

As a maximum, a <flex> value sets the track’s flex factor; it is invalid as a minimum.

There may be more to this behavior that I haven't yet discovered in the track sizing algorithm.

Here's an alternative approach to the problem:

• set the row height to auto (content-based height)
• manage the min and max heights on the grid item

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;  /* adjustment */
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
  min-height: 50px;   /* new */
  max-height: 150px;  /* new */
}

<aside>aside</aside>
<aside class="homepage">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</aside>
<aside>aside</aside>