旧版 firefox（≤67）忽略 min-content，safari ≤14.1 完全 fallback 至 auto；flex 中需用 flex: 0 0 min-content；grid 中 max-content 溢出需配合 overflow-x、minmax 和 min-width: 0 控制。
旧版 Firefox（≤67）根本不识别 min-content 关键字
不是解析错误，而是直接忽略——min-content在 Firefox 68 才开始原生支持，此前版本会当作无效值丢弃，退化为 auto 或初始值。你写 -moz-min-content 没用，它从来就没有这个前缀变体，语法非法，整条声明静默失效。
实操建议：
- 用
@supports (grid-template-columns: min-content)做真实检测（@supports (display: grid)不够，只测基础 Grid 支持） - 对旧 Firefox 单独降级：改用
grid-template-columns: repeat(3, 1fr)或display: flex+flex: 0 0 auto - 若必须动态宽度，只能靠 JS 测量文字宽度后设
width（比如用getBoundingClientRect()或measureText）
Safari ≤14.1 对 width: min-content / max-content 完全 fallback 到 auto
即使写对了 width: min-content，Safari 14.1 及更早版本也会无视，渲染结果等同于没写。这不是 bug，是规范未实现。而 Safari 15.4 才真正稳定支持 minmax() 和 fit-content()。
常见误判现象：
-
button上设width: min-content但按钮仍铺满父容器 → 实际是 Safari 直接跳过该声明 -
grid-template-columns: min-content 1fr中第一列宽度异常 → Safari 把min-content当作auto处理，列宽由内容默认流决定 - 加了
white-space: nowrap也无效 → 因为关键字本身未被识别，后续计算无从谈起
Flex 子项写 width: min-content 会被 flex 规则覆盖
Flex 布局中，width 不是主轴尺寸的决定者，flex-basis 才是。你写 width: min-content，浏览器会先按 flex 默认规则（flex-basis: auto）计算，再把 width 当作无关声明丢弃。
正确写法只有两种：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
flex: 0 0 min-content（推荐，显式禁伸缩、设基准） -
flex-basis: min-content（需确保没被flex: 1等覆盖）
注意冲突点：
- 不能和
flex: 1同时用在一个元素上，后者会让flex-basis失效 - 若父容器是
flex-wrap: wrap，min-content在换行后可能触发额外 layout 测量，卡顿明显
Grid 中 max-content 导致横向溢出却无法滚动
max-content 强制轨道宽度等于“最长不折行字符串”，比如一串无空格 URL 或哈希值，整段撑开。但它不会自动创建滚动上下文——即使父容器有 overflow-x: auto，网格容器本身默认不建立 BFC 边界，溢出内容会直接突破容器。
必须同步处理三层：
- 网格容器加
overflow-x: auto且有明确width或max-width - 对应轨道用
minmax(0, max-content)或clamp(200px, max-content, 600px)设边界 - 网格项自身加
min-width: 0（否则默认min-width: auto会顶住不缩，溢出传导）
特别注意：grid-auto-columns: max-content 在 Chrome 旧版本中不支持，Safari ≤15.3 会静默忽略，别依赖它。
真正难搞的不是关键字本身，而是它依赖的底层布局引擎是否实现了「内容尺寸反推」这一整套逻辑。旧内核要么跳过，要么算错，没法靠补丁修——能控制终端更新节奏的项目才适合直接用；否则，fit-content() 加降级 fallback 是目前最务实的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
