当 minmax 为： minmax(auto, auto) 时会发生什么

Question

在这篇文章的底部 (How the minmax() Function Works) 写着minmax(auto, auto)：

如果用作最大值，则 auto 值等同于 max-content 值。如果用作最小值，则 auto 值表示单元格可以达到的最大最小尺寸。这个“最大最小尺寸”不同于 min-content 值，由 min-width/min-height 指定。

有人介意详细说明min-content 与此处“由 min-width/min-height 指定”的 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)，但具有额外的能力。）

---

下面和互动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>