Safari中max-content兼容分三阶段：≤14.0完全不识别，回退auto；14.1–15.3可解析但存在计算bug；≥15.4基本稳定但需white-space:nowrap且flex子项须写flex:0 0 max-content。
因为 Safari 14.1 之前根本不支持 width: max-content，旧版会直接退化为 width: auto；而 Safari 14.1–15.6 虽然解析该值，但若没配 white-space: nowrap 或父容器是 flex 且未禁收缩，它仍会“假装生效”实则失控撑破。
max-content 在 Safari 中的三段式兼容表现
不是所有 Safari 都一样，得按版本拆开看：
- Safari ≤14.0：完全不识别
max-content，CSS 规则被整个丢弃，回退到width: auto（即铺满父容器） - Safari 14.1–15.3：能解析
max-content，但对minmax(0, 1fr)和嵌套calc()有解析 bug，max-content计算可能卡在中间状态 - Safari ≥15.4：基本稳定，但仍有两个硬限制——必须搭配
white-space: nowrap，且 flex 子项需显式写flex: 0 0 max-content，否则会被默认flex-shrink: 1压缩变形
为什么写了 max-content 还撑爆？常见配置漏项
就算 Safari 版本够新，以下任一缺失都会让 max-content 失效或反向加剧溢出：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 没加
white-space: nowrap：这是触发max-content计算的前提。不加它，浏览器仍按默认折行策略算宽度，结果不可控 - 按钮在
display: flex容器中，却只写width: max-content：flex 子项的width会被flex-basis覆盖，必须写成flex: 0 0 max-content - 父容器设了
overflow: hidden却没加max-width: 100%：max-content不受max-width约束，但容器本身若没宽度上限，整块布局仍会横向拉伸 - 用了中文长串无空格文本（如“导出为CSV格式文件”）：它被当做一个不可折行单元，
max-content就真按这整串像素宽计算，毫无缓冲
比 max-content 更稳妥的 Safari 友好方案
别硬扛 max-content 的兼容包袱，用它实际能落地的替代组合：
立即学习“前端免费学习笔记（深入）”；
- 首选
width: fit-content()：Safari 15.4+ 支持良好，且自带边界逻辑——不会窄于min-content，也不会宽过可用空间。写法：width: fit-content(); max-width: 100%; - 退一步用
display: inline-block+white-space: nowrap：绕过 flex/gird 的复杂规则，max-content行为更可预测，且 Safari 9+ 全支持 - 极端情况加兜底：用
@supports (width: max-content)检测，不支持时 fallback 到width: auto; min-width: 80px;这类固定下限 - 移动端必加
min-width: 0：尤其当按钮嵌在 flex 容器里，不加这个，Safari 会固执地按min-width: auto（≈min-content）保护内容，导致后续所有换行/截断都失效
真正容易被忽略的点是：Safari 对 max-content 的支持不是“全有或全无”，而是分层失效——语法能认、计算会错、布局不稳。你看到的“撑爆”，大概率是 white-space 和 flex 规则没对齐，而不是 Safari “又坏了”。
