为何minmax会将值限制在网格容器最大宽度内？

我发现minmax函数存在特殊行为，无法找到相关解释。原本认为当第二列文本较长时，下方代码应该出现溢出、保留“理想尺寸”，但测试后发现minmax列始终不会溢出，呈现出限制行为，我查阅了相关规范但没找到明确解释，可能是理解有误，想知道原因。

代码示例 #

CSS部分 #

.grid {
  border: 1px solid;
  display: grid;
  max-inline-size: 300px;
}
.minmax {
/* 看起来minmax被重写为minmax(50px, min(1000px, 300px)) */
 grid-template-columns: 100px minmax(50px, 1000px);
}

.no-minmax {
  grid-template-columns: 100px max-content;
}

.a {
  background-color: oklch(from tomato 90% c h);
}

.b {
  background-color: oklch(from green 80% c h);
}

HTML部分 #

<h2>minmax(): clamp to grid container max-width</h2>
<code>grid-template-columns: 100px minmax(50px, 1000px);</code>
<div class="grid minmax">
  <div class="a">The quick brown fox</div>
  <div class="b">The quick brown fox jumps over the lazy dog!</div>
</div>

<h2>no-minmax(): overflow container</h2>
<code>grid-template-columns: 100px max-content</code>
<div class="grid no-minmax">
  <div class="a">The quick brown fox</div>
  <div class="b">The quick brown fox jumps over the lazy dog!</div>
</div>

原因解释 #

这是CSS Grid的轨道大小算法导致的：

• 当使用minmax(50px, 1000px)作为列轨道尺寸时，该轨道属于「弹性轨道」，Grid容器会优先在自身可用空间内调整轨道大小。容器max-inline-size: 300px，第一列固定100px，所以第二列最多只能使用200px的空间。minmax的max值（1000px）只是轨道的理想最大宽度，一旦超过容器剩余可用空间，轨道会自动收缩到可用空间大小，同时不会小于min值（50px）。
• 而max-content属于「非弹性轨道」，它会完全按照内容的理想宽度渲染，不会考虑容器的剩余空间限制，因此当内容宽度超过容器剩余空间时就会溢出。

简单总结：

• minmax(a, b)轨道的实际宽度范围是[a, min(b, 容器剩余可用空间)]
• max-content轨道的宽度直接等于内容的理想宽度，不受容器空间约束

内容的提问来源于stack exchange，提问作者Marko