minmax() 的 max 不是强制约束，而是理想上限；内容固有尺寸超限时会突破限制，需配合 overflow 控制、禁用抗压缩属性及设 min 为 0 才能真正生效。
为什么 minmax() 不能直接“压窄”已撑开的列
常见误解是：只要给某列写 grid-template-columns: minmax(100px, 200px) 1fr;，它就一定不会超过 200px。但实际中，如果该列里有长文本、图片或设置了 white-space: nowrap 的内容，浏览器会优先满足内容可读性，突破 max 限制——minmax() 的 max 只是“理想上限”，不是强制截断线。
-
minmax(min, max)的max仅在空间富余且内容不溢出时生效；一旦内容固有尺寸 >max，网格会按内容尺寸分配（即“增长优先”） - 真正起约束作用的是内容自身的换行、缩放或溢出行为，不是网格定义本身
- 单纯改
minmax()参数，对已撑开的列往往无效
让列真正服从 minmax() 的三个必要动作
必须同时控制内容行为 + 网格分配逻辑，否则 minmax() 形同虚设。
- 给该列所有直系子元素加
overflow: hidden或text-overflow: ellipsis（配合white-space: nowrap），防止内容强行撑开 - 确保列内块级元素没有固定宽（如
width: 300px）或flex-shrink: 0这类抗压缩属性 - 用
minmax(0, 200px)替代minmax(100px, 200px)——把min设为0允许列在空间紧张时收缩到极致，避免因最小值卡死导致整行重排
minmax(0, Npx) 和 minmax(auto, Npx) 的关键区别
很多人用 auto 以为更“智能”，其实它常是列变宽的元凶。
-
minmax(auto, 200px)中的auto等价于该列内容的 固有最小宽度（intrinsic minimum width），比如一个未换行的长单词就是它自身长度 -
minmax(0, 200px)则把下限压到 0，把收缩权完全交给网格容器和内容溢出策略 - 实测中，
minmax(0, 200px)配合overflow: hidden才能稳定守住 200px 上限
.grid {
display: grid;
grid-template-columns: minmax(0, 200px) 1fr;
}
.grid > *:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
当列里有图片或表单控件时要额外注意什么
图片默认 min-width: auto，表单控件（如 <input>）有浏览器内置最小宽，它们都会无视 minmax() 的 max。
立即学习“前端免费学习笔记（深入）”；
- 图片必须加
max-width: 100%和height: auto，否则按原始尺寸参与布局 -
<input>、<select>等需显式设width: 100%，并确认父容器没设min-width - 避免在该列使用
display: inline-block或float，它们会绕过网格的尺寸协商机制
minmax() 调参数不如先检查那一列里有没有一个没设 overflow 的 <div>，或者一张没加 max-width 的图片。 
