为何`width: min-content`在`display: grid`跨列单元格中失效？

示例代码 #

CSS

.a {
  width: 100px;
  border: 2px solid blue;

  min-width: min-content;
  /* min-width: max-content; */

  display: grid;
  grid: 1fr / 1fr max-content;
}

.b {
  border: 2px solid purple;
}

.c {
  border: 2px solid green;
  /* grid-column: 1 / -1; */
}

.d {
  width: 200px;
  border: 2px solid red;
}

HTML

<div class="a">
  <div class="b">
    1
  </div>
  <div class="b">
    2
  </div>
  <div class="c">
    <div class="d">
      *content*
    </div>
  </div>
</div>

默认状态下布局正常，取消注释.c的grid-column: 1 / -1;后，.c占满整个网格行，此时容器.a出现溢出。将.a的min-width从min-content改为max-content可解决溢出，但会引发实际页面的文本尺寸问题，以下是两者在此场景的核心差异：

差异解析 #

• min-content 的计算逻辑
  min-content取网格容器内网格轨道本身的最小所需宽度总和：

  • 未开启跨列时，网格分为1fr和max-content两列，两列最小宽度仅需容纳.b内的数字，总和远小于设置的width:100px，容器保持100px宽度，布局正常。
  • 开启跨列后，.c跨占两列，但min-content仍基于原本两列的最小尺寸计算，容器宽度仍被限制为100px。而.c内部的.d固定宽度200px，超过容器宽度，导致溢出。

• max-content 的计算逻辑
  max-content取网格容器内**所有网格项（含跨列项）**的最大内在宽度：
  当.c跨列后，它的内在宽度由内部.d的200px决定，因此.a的max-content值为200px，大于设置的width:100px，容器会被拉伸至200px，刚好容纳.d，避免溢出。但在实际页面中，max-content会让容器宽度拉伸到文本不换行的最大宽度，可能导致容器过宽，破坏布局。

核心差异总结 #

在此场景中，min-content仅关注网格轨道的最小尺寸，忽略跨列项内部元素的强制宽度；而max-content会考虑所有网格项的最大内在宽度，将容器拉伸至能容纳最宽元素的尺寸。

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