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

user_13052011 0
Viewed 700

In the bottom of this article (How the minmax() Function Works) it says for minmax(auto, auto):

If used as a maximum, the auto value is equivalent to the max-content value. 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.

Would someone mind eleborating on the difference between min-content and the auto here that’s ‘specified by min-width/min-height’?

I understand min-content to be smallest possible width the cell can be that does not lead to an overflow. What does ‘specified by min-width/min-height’ mean?

Thanks

css-grid css
1 Answers

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>

As you can see, when I added min-width:200px the auto will consider that value and will be bigger than the max (10px) and the result will be 200px because

If the max is less than the min, then the max will be floored by the min (essentially yielding minmax(min, min)). ref

If you use min-content you can clearly see the difference

.container {
  display: grid;
  grid-template-columns: minmax(min-content, 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>

min-content will be bigger than 10px and will be used to define the size while in the first example (without min-width) auto will compute to 0

When using minmax(auto,auto) it will be different and you will have the following:

.container {
  display: grid;
  grid-template-columns: minmax(auto, auto) 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>

representing the range between the minimum and maximum described above. (This behaves similar to minmax(min-content, max-content) in the most basic cases, but with extra abilities.)

Below and interactive Demo to better see the difference between the use of auto, min-content, max-content

Resize and see how it behaves in each case.

.container {
  display: grid;
  width: 300px;
  resize: horizontal;
  overflow: auto;
  grid-gap: 5px;
  margin: 5px;
  border: 1px solid;
}

.container>div {
  height: 50px;
  background: red;
  color: #fff;
}
<div class="container" style="grid-template-columns:minmax(auto,auto) minmax(auto,auto)">
  <div>some text</div>
  <div>some text</div>
</div>
<div class="container" style="grid-template-columns:minmax(min-content,max-content) minmax(min-content,max-content);">
  <div>some text</div>
  <div>some text</div>
</div>
<div class="container" style="grid-template-columns:minmax(auto,40%) minmax(auto,40%)">
  <div>some text</div>
  <div>some text</div>
</div>
<div class="container" style="grid-template-columns:minmax(min-content,40%) minmax(min-content,40%)">
  <div>some text</div>
  <div>some text</div>
</div>
<div class="container" style="grid-template-columns:minmax(30%,max-content) minmax(30%,max-content)">
  <div>some text</div>
  <div>some text</div>
</div>
<div class="container" style="grid-template-columns:minmax(30%,auto) minmax(30%,auto)">
  <div>some text</div>
  <div>some text</div>
</div>

user_86203330
Related