Minmax() Defaulting to Max

minmax() defaulting to max

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>

Why does `minmax` always use maximum space?

When you are not using minmax, css grid can use content-sensitive sizing, but evidently, as soon as you add minmax, the grid ignores content and divides space equally among different cells. minmax also prefers to waste space if possible; it will only use less than the maximum if the container is constrained (e.g. by a fixed height or width.)

Therefore, avoid minmax if you want content-sensitive sizing. In fact, content-sensitive sizing seems to be supported only for auto (and no, you cannot write something like calc(auto+2fr) to get more intelligent distribution of free space.)

The desired effect of having a minimum and maximum row height can be accomplished by using auto as the row height and setting the minimum and maximum as properties of the items instead:

.testgrid {  display: grid;  grid-template-columns: 20% auto 1fr;  grid-auto-rows: auto;  max-width: 600px;}
.testgrid .item {  background-color: #AF6;  margin: 1px;  overflow: hidden;  min-height: 1.5em;  max-height: 4.5em;}

<div class="testgrid">  <div class="item">Cell 1</div>  <div class="item">Cell 2</div>  <div></div>  <div class="item">Cell 3 (uses too much space, so really it ought to be clipped)</div>  <div class="item">Cell 4</div>  <div></div>  <div class="item">Cell 5</div>  <div class="item">Cell 6 (more text here, could push the column wider)</div>  <div></div></div>

CSS minmax(): prioritize max value

What you are looking for is the combination of width/max-width like this:

width:50%;
max-width:70vmin;

If 70vmin > 50% then we will have at least 50% (our min boundary) and we will not exceed 70vmin
if 70vmin < 50% then we will have a width equal to 70vmin (our max
boundary that suppress the min one)

You can achieve this using a simple div and margin:auto. No need for grid:

.grid-item {  max-width: 70vmin;  width: 50%;  height: 50px;  margin:auto;  background: red;};

 <div class="grid-item"></div>

Using minmax() functions in CSS grid

The minmax() function is working fine. So is the calc() function.

The problem is a misunderstanding about the minimum height and widths that are set.

Even though you set the grid items to zero width and height:

.hide {
  width: 0;
  height: 0;
}

...the grid columns have their own width and height:

#outer {
  display: grid;
  grid-template-columns: minmax(calc(700px - var(--seemoresz)), 700px) minmax(0px, var(--seemoresz));
  grid-template-rows: minmax(0px, var(--seemoresz)) minmax(calc(700px - var(--seemoresz)), 700px);
}

The columns and rows aren't shrinking to zero, which prevents .show from expanding across the entire container.

Consider using auto instead of minmax() in grid-template-*. That will enable the column / row to track the size of the grid item.

Also consider the solutions in these posts:

How to make a column span full width when a second column is not there? (CSS Grid)
Is it possible to hide columns with empty content via the grid-template-columns definition?
minmax() defaulting to max

What happens when minmax is: minmax(auto, auto)

Here is an illustration of your quote:

.container {  display: grid;  grid-template-columns: minmax(auto, 10px) 1fr;  grid-gap: 5px;  border: 1px solid;}
.container>div {  height: 50px;  background: red;  color: #fff;}

<div class="container">  <div>some text</div>  <div></div></div>
<div class="container">  <div style="min-width:200px;">some text</div>  <div></div></div>

CSS - grid auto-fit not working when using minmax with max being specific length

Is auto-fill or just auto be what you would expect ?

.working {
  width: 100%;
  height: 5rem;
  margin-bottom: 3rem;
  justify-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, auto));
  gap: 1rem;
}

.item {
  background-color: red;
  min-width:min-content;
}
.not.working {

  grid-template-columns: repeat(auto-fit, minmax(5rem, auto));
}

<div class='working'>
  <div class='item'>plap plap plap plap</div>
  <div class='item'>plip plip</div>
  <div class='item'>plop plop plop plop plop plop plop plop plop plop</div>
  <div class='item'>.</div>
</div>

<div class='not working'>
  <div class='item'>plap plap plap plap</div>
  <div class='item'>plip plip</div>
  <div class='item'>plop plop plop plop plop plop plop plop plop plop</div>
  <div class='item'>.</div>
</div>

Minmax() Defaulting to Max