如何用CSS使盒子宽度根据内容自动伸缩，应用min-content和max-content？

本文共计966个文字，预计阅读时间需要4分钟。

最常见原因是：

• 中文段落设 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 缩写中，否则被忽略。