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-width/min-height 指定”的 auto 之间的区别吗？

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

谢谢

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 并将用于定义第一个示例中的大小(没有 min-width)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.)

---

下面还有交互式演示，可以更好地看出使用 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>