max-content 宽度在 Chrome/Firefox 中表现不一致，Firefox 严格按内容（含空格、换行）计算，Chrome 可能忽略内联换行；需配合 display: inline-block 或 fit-content 才生效，且受父容器宽度、overflow 等影响；fit-content 更可控且兼容性更好。
max-content 宽度在 Chrome/Firefox 中表现不一致
直接写 width: max-content 看似能撑开盒子到内容自然宽度，但实际行为取决于父容器是否设了 width 或 max-width，且 Firefox 会严格按内容（含空格、换行）计算，Chrome 则可能忽略部分内联换行。这不是 bug，是规范允许的渲染差异。
- 仅当父容器未设固定宽、且自身
display是inline-block或fit-content盒时，max-content才真正生效 - 块级元素默认不收缩，
width: max-content反而可能被忽略（浏览器回退到auto） - 如果内容含长单词或 URL，需额外加
overflow-wrap: break-word防溢出
替代方案：fit-content() 比 max-content 更可控
width: fit-content 是更稳妥的选择——它先尝试 max-content，再根据可用空间收缩，且现代浏览器支持度更好（Chrome 65+、Firefox 63+、Safari 14.1+）。
- 用法：
width: -moz-fit-content（旧版 Firefox）、width: -webkit-fit-content（旧版 Safari），现在统一写width: fit-content即可 - 它对
flex子项、grid项也有效，而max-content在 flex 容器里常被拉伸失效 - 注意：IE 完全不支持，若需兼容，得 fallback 到
display: inline-block+white-space: nowrap
遇到 width: max-content 不生效？先检查 display 和 box-sizing
最常见原因是盒子没脱离文档流常规尺寸逻辑。比如 display: block 元素写 width: max-content，浏览器可能直接无视。
- 必须显式设
display: inline-block或display: table，才能让max-content触发“收缩到内容”行为 -
box-sizing: border-box下，max-content计算的是内容区宽度，不含 padding/border；若要包含，得手动加回来（无自动适配） - 如果父元素有
overflow: hidden，子元素即使设了max-content，也可能被裁剪——这不是宽度没生效，而是溢出被截断
用 JavaScript 动态读取 max-content 实际宽度很麻烦
CSS 的 max-content 是渲染时计算的，无法通过 getComputedStyle(el).width 读出具体像素值，返回的永远是 "max-content" 字符串。
立即学习“前端免费学习笔记（深入）”；
- 想获取真实宽度，只能用
el.scrollWidth（含 padding）或el.getBoundingClientRect().width（含 border），但前提是元素已渲染且未被隐藏 - 如果内容是异步加载的（如图片、远程文本），需等
load或resize后再读，否则值不准 - 不要试图用
offsetWidth判断是否“已撑开”，它在display: none或未 append 到 DOM 时恒为 0
max-content 不是万能宽度开关，它依赖 display 模式、父容器约束和内容特性，稍不留神就“看起来没反应”。真要精确控制最大内容宽度，fit-content + 显式 display 组合更靠得住。 
