What does the first 'auto' in minmax(auto, auto) compute to?

Question

I am interested in the first auto value in minmax(auto, auto).

I've noticed auto will be the length of: the width of longest word when the grid-item’s min-width|width: auto; and 200px if min-width|width: 200px;.

I've read "If used as a minimum, the auto value represents the largest minimum size the cell can be. This "largest minimum size" is different from the min-content value, and specified by min-width/min-height." (https://bitsofco.de/how-the-minmax-function-works/).

In order to make sense of this italicized phrase, is it the case that: width: 200px actually sets min-width to 200px, too?

Otherwise, I am wondering why the author left out the fact that plain width will also determine the length of auto.

Consider setting up code samples that show / test the behavior. — Michael Benjamin, Jun 11 '20 at 21:53
Also, have you read the description for `minmax` and `auto` in the spec? https://drafts.csswg.org/css-grid/#track-sizes — Michael Benjamin, Jun 11 '20 at 21:53
'As a minimum: represents the largest minimum size (specified by min-width/min-height) of the grid items occupying the grid track.' My question was it says this 'largest minimum size' is 'specified by min-width'. However when you add just plain `width` to the grid-item the item will also not shrink below its `width`. Am I to understand that `width` is just implied by `min-width`? It might sound really picky but I'm trying to get better at reading W3C. — tonitone106, Jun 12 '20 at 13:57

Michael Benjamin · Accepted Answer · 2020-06-12T18:32:37.797

My question is that it says "largest minimum size" is "specified by min-width". However, when you add just plain width to the grid-item the item will also not shrink below its width. Am I to understand that width is just implied by min-width?

A grid / flex item, by default, cannot be smaller than its defined length or content size (whichever is smaller). The default settings are min-width: auto (in inline / row-direction), and min-height: auto (in block / column-direction).

Here are complete explanations:

You need to override this setting (e.g., min-width: 0) to see the difference between width and min-width.

Here are a few examples (using flex):

article {
  display: flex;
}

article:nth-of-type(1) > section {
  width: auto;
  flex-grow: 1;
}

article:nth-of-type(2) > section {
  width: 400px;
  flex-grow: 1;
}

article:nth-of-type(3) > section {
  width: 400px;
  flex-grow: 1;
  min-width: 250px;
  flex-shrink: 1;
}

article:nth-of-type(4) > section {
  width: 400px;
  flex-grow: 1;
  min-width: 0;
  /* can also use overflow property with any value other than `visible` */
}


/* non-essential demo styles */

article {
  margin-bottom: 25px;
}

section {
  white-space: nowrap;
  height: 50px;
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
}

body {
  margin: 25px 50px;
}

<code>width: auto &amp; min-width: auto (default)</code>
<article>
  <section>With these settings, this item CANNOT shrink past its content size. Resize horizontally to see.</section>
</article>

<code>width: 400px &amp; min-width: auto (default)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size, but CANNOT shrink past its defined width.</section>
</article>

<code>width: 400px &amp; min-width: 200px (override)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size, but CANNOT shirnk past its min size.</section>
</article>


<code>width: 400px &amp; min-width: 0 (override)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size AND its defined width.</section>
</article>

What does the first 'auto' in minmax(auto, auto) compute to?

1 Answers1

jsFiddle demo