根本原因是子项默认min-width: auto（即min-content），浏览器优先撑宽网格而非截断；必须对子项设min-width: 0“松绑”最小宽度，并配合overflow-wrap或word-break等控制溢出行为。
Grid子项文字或长内容撑破列宽，根本原因不是overflow没写，而是子项默认有min-width: auto（实际表现接近min-content），浏览器宁可拉宽网格也不截断。加min-width: 0是必须的第一步，但它必须作用于子项自身，且要配合其他样式才真正生效。
为什么只给子项加min-width: 0还不够
min-width: 0只是“松绑”了最小宽度限制，告诉浏览器“允许缩到0”，但不决定内容怎么处理溢出。它解决的是“能不能缩”，不是“缩了之后怎么办”。
- 如果内容是无空格长串（如
https://example.com/very-long-token-without-dash），即使min-width: 0生效，浏览器仍默认不折行 → 结果是内容横向溢出，而非换行 - 如果子项内部还嵌套了
display: flex或inline元素，它们可能继承min-width: auto，导致内层继续撑开 - 若子项被设为
white-space: nowrap却没配overflow: hidden和text-overflow: ellipsis，省略号不会出现——三个条件缺一不可
min-width: 0必须作用于具体子项，不能只写在容器上
常见误操作是给.grid容器加min-width: 0，这完全无效。Grid容器的min-width不影响子项尺寸计算。
- 正确写法：
.grid-item { min-width: 0; }—— 必须是直接子元素的选择器 - 在Vue
<style scoped></style>中，需用:deep(.grid-item)穿透作用域 - React中若用
styled-components，确保样式最终落在真实DOM节点上，而不是包装组件上 - 框架组件（如Ant Design的
Card）通常不自带min-width: 0，得手动覆盖
搭配overflow-wrap还是word-break？看内容语义
当需要自动换行而非截断时，min-width: 0是前提，但断行策略得另选：
-
overflow-wrap: break-word：只在单词过长、放不进当前行时才拆，保留英文空格、连字符等语义断点，推荐用于用户可见文本 -
word-break: break-all：暴力拆分任意字符间（包括中文、字母中间），适合日志、哈希值、base64等无阅读语义的内容 - 两者都依赖
min-width: 0才能起效；不加它，在fr列中break-all也可能失效 - Safari对
break-all在Grid/Flex中的支持曾有bug，iOS 15+建议实测
别忽略grid-template-columns里的陷阱
即使子项写了min-width: 0，如果轨道定义本身拒绝收缩，溢出依然发生：
-
1fr等价于minmax(auto, 1fr)，遇到长内容仍会撑开 → 改用minmax(0, 1fr) -
max-content列会强制按内容最大宽度分配 → 改用minmax(0, max-content) -
fit-content(200px)在Firefox中对subgrid支持差，且可能因min-content计算异常压缩过度 → 优先用minmax(0, 200px) - 对
grid-column: span 2的子项，min-width: 0尤其关键，否则它会拒绝缩小以适配合并后的轨道
最麻烦的其实是文本节点里混着没有空格的超长base64或哈希值——这时候单靠min-width: 0压不住，得同时上overflow-wrap: break-word和word-break: break-all，再确认父级没被align-items: stretch意外拉高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
