minmax()在safari 14.1及更早版本中不生效，直接导致网格列/行不收缩、内容撑破容器、auto-fit失效；其根本原因是旧内核未实现该语法，需用@supports (grid-template-columns: minmax(0, 1fr))检测并降级为固定列数或flex回退。
minmax() 在 Safari 14.1 及更早版本中不生效
直接后果是：网格列/行不收缩、内容撑破容器、auto-fit 失效。这不是写法错误，而是 Safari 旧内核根本没实现该语法。检查浏览器支持表可知，minmax() 在 Safari 中从 15.4 才开始稳定支持（部分行为在 15.2–15.3 存在解析 bug）。
- 用
@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() 解析不稳定
典型写法如 minmax(calc(100% - 20px), 1fr) 在老 Chrome 中可能被当作无效值丢弃，回退到 auto，导致列宽失控。这不是 CSS 语法错误，而是引擎解析阶段的计算中断。
- 避免在
minmax()第一个参数里用calc()；可提前提取为自定义属性：--col-min: calc(100% - 20px); grid-template-columns: minmax(var(--col-min), 1fr); - 若必须动态计算，改用
clamp()（需确认目标环境支持）或拆成媒体查询：@media (min-width: 768px) { grid-template-columns: minmax(320px, 1fr); } - 注意：
minmax()不接受混合单位比较（如minmax(200px, 50%)），浏览器会静默失效，而非报错
minmax(0, 1fr) 在子项未设 min-width: 0 时完全无效
这是最常被误判为“浏览器兼容问题”的实际逻辑错误。minmax(0, 1fr) 告诉轨道“可缩至 0”，但网格项默认有 min-width: auto（≈ min-content），它会顶住不缩，轨道就卡死在最小内容宽——看起来像函数没起作用。
- 必须同步设置：
.grid > *（直接子项）加min-width: 0 - 若子项内部还有
display: flex或嵌套grid，其**直接子元素**也得加min-width: 0，否则溢出会传导 -
<img>、<pre class="brush:php;toolbar:false;"></pre>、<table> 等固有尺寸元素极易漏掉这步，它们的 <code>min-width默认不是0Grid 容器 overflow: hidden 对撑破行为无感
加了
overflow: hidden却依然横向滚动？不是样式没生效，而是浏览器根本没让它“溢出”——minmax()轨道在布局计算阶段就被内容撑开，此时内容还在容器内，overflow连裁剪机会都没有。- 真正要裁剪的是网格项本身，不是容器；
overflow: hidden必须配合min-width: 0和minmax(0, 1fr)才能触发轨道压缩 - 文字截断还需额外控制：单行用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;；多行用-webkit-line-clamp（Firefox 需display: grid替代方案） -
overflow: hidden对display: contents或visibility: collapse的子项完全无效，这类元素不参与盒模型计算
复杂点在于：这些限制不是孤立存在的。比如你在 Safari 14.1 上同时用了
minmax(calc(100% - 20px), 1fr)且没给子项设min-width: 0，那问题根源其实是三重叠加——语法不支持、计算中断、逻辑阻塞。调试时得一层层剥开，不能只盯着控制台有没有报错。 - 真正要裁剪的是网格项本身，不是容器；
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
