先记住这个答案
详情页标签列想随短文字变宽，却不要无限挤压正文，可以考虑 fit-content(200px)；它给最大内容方向一个受限制的上限，并非把列锁死在 200px。auto 轨道在有余量时还可能参与拉伸，因此两者在宽容器里表现不同。若内容的最小固有宽度已经大过上限，fit-content() 也未必能把它硬压进去。
fit-content()有增长上限- 短内容不必长到参数值
- 最小内容仍可能撑过上限
auto轨道可随内容和余量变化
详情页标签列限制宽度
资料页左边是标签列，右边是正文。标签短时，希望左列只占自身宽度；长标签出现时，希望左列不要无限变宽。可尝试 grid-template-columns: fit-content(200px) 1fr。但如果标签是一段完全不能断行的长串，它的最小内容宽度可能仍超过 200px。此时还要处理文本断行、裁剪或让该列滚动；fit-content() 不是内容溢出的万能保险。
.detail {
display: grid;
grid-template-columns: fit-content(200px) minmax(0, 1fr);
gap: 16px;
}
.label { overflow-wrap: anywhere; /* 控制长串的最小内容宽度 */ }短标签不会强行占满 200px，长标签还要考虑如何断行。
fit-content() 不是固定宽度
轨道尺寸中的 fit-content(limit) 可理解为根据内容决定尺寸，但把可增长的上界限制在给定值和内容最小需求之间。auto 轨道的最大尺寸更接近最大内容贡献，并且可受 align-content 或 justify-content 的拉伸影响。两者在内容很短且没有多余空间时可能看起来一样；区别通常在容器变宽、内容变长时出现。不要把 CSS 的 fit-content() 轨道函数与元素宽度上的同名关键字混为同一套用法。
可以把标签列放在 fit-content(200px)，正文列设为 minmax(0, 1fr)，然后依次放短标签、较长标签和一个不可断的长词。短标签时列可接近内容宽度；较长内容会接近给定限制；不可断内容仍可能突破这个限制，因为最小内容贡献不能简单忽略。若设计要求严格不超过 200px，还需要给内容提供断行、裁剪或滚动规则。auto 列在同样容器中可能继续吃剩余空间，不能把它等同于“按内容刚好包裹”。
容易答错的地方
- 认为
fit-content(200px)必定不超过200px - 不可断开的最小内容贡献可以把轨道撑过这个值，还需处理内容本身。
- 认为
auto一定吃掉所有剩余空间 - 它能否拉伸还受其他轨道和对齐规则影响，不能脱离整个网格来断言。
面试官还会怎么问？
为什么短标签时左列没到 200px？
参数是尺寸上限，不是指定宽度；内容很短时轨道可以随内容保持较窄。
怎么限制完全不换行的长词？
允许断行可用 overflow-wrap: anywhere，或者按需求在内容盒内裁剪、滚动。
与 minmax(auto, 200px) 完全一样吗？
不完全一样。fit-content() 有自己的轨道尺寸公式，对最小内容贡献和可用空间的处理不能直接替换为这组上下限。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。