Safari ≤15.6 对 minmax(280px, 1fr) 中 1fr 解释激进，优先拉伸单列填满容器而无视最小值，导致卡片横向溢出；应改用 minmax(280px, max(280px, 1fr)) 并配合 width: 100%、min-width: 0、图片 max-width: 100% 三补丁。
为什么Safari在小屏下把卡片撑得比容器还宽？
这不是auto-fit写错了，而是 Safari ≤15.6（以及部分旧版 Firefox）对minmax(280px, 1fr)中1fr的解释更“激进”：它会优先拉伸单列填满容器，无视minmax()的最小值约束，导致卡片在 iPhone 上横向溢出、触发滚动条。
- 典型现象：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))在 Safari iOS 15.6 下，375px 宽屏幕仍渲染出单列宽度 ≈ 375px − gap，远超 280px，内容被强行拉伸变形 - 根本原因：Safari 把
1fr当作“尽可能大”，而非“在满足 min 前提下的均分” - Chrome / Edge / Safari 16+ 行为一致，问题集中在 iOS 15.x 和 macOS Monterey 上的 Safari
绕过 Safari 的 fr 解释差异：用 max() 替代 1fr
不用改列数逻辑，只换掉有歧义的 1fr —— 改用 max(280px, 1fr) 显式声明“至少 280px，但不小于 1fr”，能强制 Safari 尊重下限。
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(280px, max(280px, 1fr)) - 原理：
max(280px, 1fr)在窄屏下取1fr（此时 1fr ≈ 容器宽），在宽屏下取280px（因 1fr 变小），实际效果和原意一致，但绕过了 Safari 对纯1fr的宽松处理 - 兼容性：所有支持
minmax()的浏览器都支持max()，包括 Safari 14.1+
必须同步做的三件事，否则修复无效
光改 minmax() 不够，Safari 的 bug 往往和父级尺寸计算链耦合。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 给 Grid 容器加
width: 100%或max-width: 100%：防止上层white-space: nowrap或未设宽的 flex 容器干扰可用宽度 - 所有子项加
min-width: 0：尤其当卡片内部用了display: flex或嵌套grid，否则浏览器默认min-width: auto会撑开轨道 - 图片统一加
max-width: 100%; height: auto;：避免未约束的图片突破minmax()下限，这是 Safari 下最常被忽略的“隐形撑宽源”
要不要降级到 auto-fill？别轻易换
auto-fill 看似“更稳定”，但它保留空轨道，在小屏下会生成多列却只放一个卡片，导致内容被压缩、右侧留白甚至横向滚动——这在 Safari 下反而更难调试。
立即学习“前端免费学习笔记（深入）”；
- 除非你明确需要固定网格结构（如日历格子），否则不要为兼容 Safari 而切到
auto-fill - 如果项目必须支持 iOS 14–15，且无法升级 Safari，用
max()方案 + 上述三项补丁，实测覆盖 99% 场景；IE 11 则需彻底回退到 Flex +flex-wrap - 真正容易被忽略的点是：Safari 的 bug 不报错，也不警告，只默默拉伸——所以务必在真机 iOS 15.x 上验证，不能只信模拟器或 DevTools 缩放
