width: min-content在块级元素上无效，因其默认流式行为会覆盖计算结果；需配合display: inline-block、flex子项（flex: 0 0 min-content）或grid子项才能生效。
min-content 和 max-content 不是“自动伸缩”的开关，而是两种明确的、基于内容测量的尺寸策略。它们只在特定盒模型行为下生效，盲目套用 width: min-content 很可能没反应——因为块级元素默认仍会扩张填满父容器。
为什么width: min-content看起来没效果？
最常见原因是：你把它用在了普通 <div> 或 <code><p></p> 上，而这些元素是 display: block，其宽度行为由流式布局主导，min-content 的计算结果会被覆盖。
- 中文段落设
width: min-content后缩成一个字宽？那是真的算出来了——浏览器把每个汉字当可折行单元，取最大单字宽作为min-content值，但块级元素仍会拉伸到父容器宽度 - 想让它真正“包住内容”，必须切断默认流式行为：
display: inline-block、display: grid子项、或display: flex子项（配合flex: 0 0 min-content） -
white-space: nowrap不是min-content的必需条件，但对英文单词生效至关重要；中文需显式包裹不可折单元（如<span>按钮文本</span>）或设white-space: nowrap才能触发“单词级”测量
min-content 在 Flex 容器中必须写成 flex: 0 0 min-content
min-content 不能直接当 flex-basis 单独使用，Flex 规范要求它必须嵌入完整的 flex 缩写中，否则被忽略。
- 错误写法：
flex-basis: min-content—— 大部分浏览器不认，退化为auto - 正确写法：
flex: 0 0 min-content，其中0表示不放大、不缩小，min-content作为基准尺寸 - 若项目内含长英文单词或图片，这个值会让容器刚好包住最长那个不可折单元，适合操作按钮、标签栏等紧凑控件
- 注意：如果父容器
flex-wrap: wrap且空间不足，该项目不会压缩，而是换行或溢出
max-content 等价于 white-space: nowrap + 自动撑开
max-content 的宽度就是让所有内容强制不折行时的总宽度，和给子元素加 white-space: nowrap 效果一致，但它作用在容器层级，更干净。
- 适用场景：工具栏图标文字组合、表格表头、弹窗标题栏——需要确保“一行显示全”，不怕超容器
- 副作用明显：若内容过长（比如用户输入一整段 URL），盒子会撑爆父容器甚至页面，建议搭配
max-width使用，例如width: max-content; max-width: 100%; - 在 Grid 中可直接用于轨道定义：
grid-template-columns: max-content 1fr，左侧列随内容定宽，右侧自适应剩余空间 - Safari 14.1+ 才完整支持
max-content用于width，旧版 Safari 会降级为auto，需检查兼容性
别在动态列表里滥用，性能真会掉
每次 DOM 变化或窗口 resize，浏览器都要重新测量所有 min-content/max-content 元素的内容宽度，尤其是含大量文本节点或未限制渲染范围的列表，容易引发 layout thrashing。
立即学习“前端免费学习笔记（深入）”；
- 静态文案、固定结构组件（如按钮、图例项）用没问题
- 用户生成内容区域（如评论列表、聊天气泡）慎用；优先考虑 JS 预计算 + CSS 变量缓存，或改用
fit-content+max-width组合 - Chrome DevTools 的 “Rendering” 面板勾选 “Layout Shift Regions” 可直观看到哪些元素因
min-content导致频繁重排 - box-sizing 是另一个隐藏变量：
min-content计算的是 content-box 宽度，但最终渲染受box-sizing: border-box影响，别指望它自动扣减 padding
