css - 当 minmax 为 : minmax(auto, auto 时会发生什么)

Question

在这篇文章的底部( How the minmax() Function Works )它说 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.

有人介意详细说明 min-content 之间的区别吗？和这里的汽车“由最小宽度/最小高度指定”？

我理解 min-content 是单元格的最小可能宽度，不会导致溢出。 “由最小宽度/最小高度指定”是什么意思？

谢谢

Answer 1

这是您的报价的插图:

.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>

如您所见，当我添加 min-width:200px 时 auto将考虑该值并将大于最大值(10px)，结果将是 200px因为

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

如果您使用 min-content你可以清楚地看到区别

.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将大于 10px并将用于定义第一个示例中的大小(没有最小宽度) auto将计算为 0
使用时 minmax(auto,auto)它会有所不同，您将拥有以下内容:

.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.)

下面和交互Demo可以更好的看到 auto的使用区别, min-content , max-content
调整大小并查看它在每种情况下的行为。

.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>