minmax() 仅定义轨道尺寸范围，不强制缩小元素；真正阻止收缩的是网格项默认的 min-width: auto 和内容固有尺寸。
minmax() 本身不负责“缩小元素”，它只定义轨道尺寸范围；真正卡住不缩的，是网格项默认的 min-width: auto 和内容固有尺寸。
为什么写了 minmax(0, 1fr) 还是缩不了
浏览器看到 minmax(0, 1fr) 是认可的，但它只告诉轨道：“你可以缩到 0”。而网格项（直接子元素）默认有 min-width: auto（≈ 内容最小宽度），它会死顶着不让轨道收缩——结果就是轨道想缩，子项不配合，整列僵在内容宽度上。
- 常见漏掉的元素：
<img>、<iframe></iframe>、display: flex容器、含长 URL 或无空格文本的<p></p> - 嵌套结构也要处理：如果网格项内部还有 Grid 或 Flex，它的**直系子元素**同样要加
min-width: 0 - 验证方式：开发者工具 → Computed → 查该项的
min-width，不是auto就没生效
minmax() 的 min 值没单位，整条规则被静默丢弃
写成 minmax(280, 1fr) 或 minmax(50%, 1fr) 看似合理，但 280 缺少单位（如 px、rem）是非法值。CSS 规范要求两个参数都必须是合法长度或弹性单位，否则整个函数被忽略，回退到浏览器默认行为（常表现为单列、列数固定或列宽失控）。
- JS 动态拼接时容易漏：
`minmax(${width}, 1fr)`→ 若width是纯数字，就失效 - 设计稿数值直接照搬：“280” 不等于 “280px”，必须补单位
- 验证方法：Computed 面板里看
grid-template-columns，若显示为none或原始声明被划掉，大概率是单位缺失
内容自身撑开轨道，minmax() 的 max 形同虚设
minmax(min, max) 的 max 不是硬性截断线，而是“理想上限”。一旦内容固有尺寸（比如一张未设 max-width 的图片、一个 white-space: nowrap 的长单词）超过该值，浏览器会优先满足内容可读性，突破限制。
- 图片必须加：
max-width: 100%+height: auto - 文字需组合使用：
overflow: hidden+text-overflow: ellipsis+white-space: nowrap+width或max-width - 表单控件（
<input>、<select></select>）需显式设width: 100%，并确认父容器没设min-width
Safari ≤15.3 不支持 minmax()，但 @supports 检测容易误判
@supports (display: grid) 检不出 minmax() 是否可用——它只测 Grid 基础能力。真正有效的检测是：@supports (grid-template-columns: minmax(0, 1fr))。但 Safari ≤15.3 会直接忽略整个规则块，导致降级失败。
- 降级方案不能依赖
minmax()：对旧 Safari 单独用grid-template-columns: repeat(3, 1fr)或切换为 Flex 布局 - Chrome ≤98 对
minmax(calc(...), ...)解析不稳定，避免在第一个参数里用calc()；可改用 CSS 自定义属性提前计算 -
minmax(0, 1fr)在子项未设min-width: 0时，99% 的情况会被当成“兼容问题”，其实是逻辑错误
最常被忽略的一点：Grid 容器自身也可能被 min-width: auto 锁死——尤其当它作为 Flex 子项时，必须显式加 min-width: 0，否则连分配空间的机会都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
