width: fit-content 导致溢出是因为它不改变 content-box 盒模型，padding 和 border 会额外增加宽度，且对长无空格字符串不自动换行；需配合 box-sizing: border-box、word-break 或 overflow-wrap 及 min-width: 0 才能防溢出。
width: fit-content 为什么反而导致溢出
width: fit-content 本意是让元素宽度“刚好包住内容”，但它不改变盒模型计算方式——默认仍是 content-box。一旦元素有 padding 或 border，实际占用宽度 = fit-content 结果 + padding × 2 + border × 2，很容易撑破父容器。
更隐蔽的是：fit-content 对连续无空格字符串（如长 URL、base64）会按整串计算宽度，而不是换行后取行宽，结果就是横向无限拉伸。
- 常见现象：可编辑区域（
contenteditable）输入长文本后水平滚动条出现，或卡片内文字直接切掉 - 典型场景：
div[contenteditable]、pre包裹代码块、含长链接的提示文案 - 别误以为是
fit-content本身错了——它只是如实反映内容尺寸，问题在后续布局没约束它
必须搭配 box-sizing: border-box 才能稳住尺寸
只写 width: fit-content 不够，必须同时确保 padding 和 border 被计入宽度，否则它们永远“额外加出去”。
全局重置仍是唯一可靠方式：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}单独加在目标元素上也行，但容易漏：
.editable-field {
width: fit-content;
padding: 8px 12px;
border: 1px solid #ccc;
box-sizing: border-box; /* 这行不能少 */
}-
html, body { box-sizing: border-box }无效——box-sizing 不继承 -
*:not(img)类排除写法危险，svg、iframe的 wrapper 仍可能漏掉 - 检查开发者工具「Computed」面板，确认目标元素的
box-sizing确实是border-box，不是被其他样式覆盖了
fit-content 遇到长文本必须加断行控制
width: fit-content 对不可折行内容毫无约束力。它不会自动换行，也不会触发 text-overflow: ellipsis。
要真正防溢出，得叠加文本级控制：
- 强制换行：
word-break: break-word或overflow-wrap: break-word（推荐后者，语义更准） - 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需配合display: block或inline-block - 对
contenteditable元素，min-width: 0很关键——它覆盖浏览器默认的min-width: auto，否则即使写了fit-content，元素也不肯收缩
示例：
.editable-field {
width: fit-content;
max-width: 100%;
min-width: 0;
word-break: break-word;
box-sizing: border-box;
}flex/grid 容器里 fit-content 更容易失效
在 display: flex 或 display: grid 中，fit-content 常被主轴尺寸规则压制。比如父容器设了 flex: 1，子项就算写了 width: fit-content，也可能被强行拉满。
- Flex 子项优先用
flex: 0 1 fit-content替代单纯width: fit-content - Grid 子项要加
min-width: 0，否则默认min-width: auto会让fit-content失效 - 避免同时写
width: fit-content和flex: 1，两者冲突，浏览器通常以flex为准 - Grid 轨道本身要用
minmax(0, max-content)或fit-content(300px)，不能只靠子项控制
真正麻烦的从来不是 fit-content 写没写对，而是它暴露了你没处理好的底层约束：盒模型、文本流、容器收缩能力——这三者缺一，它就必然溢出。
