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

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.

Solution

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?

jsFiddle demo