当minmax为：minmax（auto，auto）时会发生什么

Question

在本文的底部（How the minmax() Function Works）表示minmax(auto, auto)：

如果用作最大值，则自动值等于最大含量值。如果用作最小值，则自动值表示单元格可以达到的最大最小大小。此“最大最小尺寸”不同于最小含量值，并由最小宽度/最小高度指定。

[有人介意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，因为

如果最大值小于最小值，那么最大值将以最小值为底（本质上是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>

代表上述最小和最大之间的范围。 （在最基本的情况下，此行为类似于minmax(min-content, max-content)，但具有额外的功能。）

---

下面和交互式演示中，可以更好地看到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,100%) minmax(auto,100%)">
<div>some text</div>
<div>some text</div>
</div>
<div class="container" style="grid-template-columns:minmax(min-content,100%) minmax(min-content,100%)">
<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>