必须设置min-width: 0才能激活overflow等截断样式，因grid子项默认min-width: auto会优先撑开列宽，导致overflow: hidden、white-space: nowrap、text-overflow: ellipsis失效。
为什么只加 overflow: hidden 没用
Grid 子项默认 min-width: auto（实际表现≈内容最小宽度），浏览器优先撑开列宽，而不是截断内容。哪怕你写了 overflow: hidden、text-overflow: ellipsis、white-space: nowrap，只要没设 min-width: 0，这些样式全被跳过——子项根本没“溢出”，它先把自己拉宽了。
常见误操作包括：
- 给
.grid-container加min-width: 0→ 完全无效，容器的min-width不影响子项尺寸计算 - 用
width: 0替代 → 会破坏布局流，可能导致元素塌陷或错位 - 在 Vue
<style scoped></style>中直接写.grid-item→ 需用:deep(.grid-item)穿透作用域 - React 中用
styled-components包了一层组件 → 样式必须落在真实 DOM 节点上，不能只作用于包装器
min-width: 0 必须搭配哪些样式才生效
min-width: 0 是“开关”，不是终点。它只告诉浏览器“允许缩到 0”，但不决定内容怎么处理。要真正隐藏或换行，还得配对：
- 单行省略：必须同时满足四个条件，缺一不可：
min-width: 0+white-space: nowrap+overflow: hidden+，且该元素要有明确宽度约束（来自 <code>grid-template-columns、max-width或父容器限制） - 长文本自动换行：
min-width: 0+overflow-wrap: break-word（推荐用于用户可见文本，保留空格/连字符语义） - 无意义字符串暴力折行：
min-width: 0+word-break: break-all（适合哈希、URL、base64，但 Safari 在 iOS 15+ 前有 bug，建议实测） - 嵌套 Flex 容器也要加：
min-width: 0只作用于直系子项；如果子项内部还有display: flex的盒子，那个盒子也得单独加min-width: 0
Grid 列定义本身也在“偷偷撑开”
即使子项写了 min-width: 0，如果轨道定义拒绝收缩，照样溢出：
-
1fr等价于minmax(auto, 1fr)→ 遇到长内容仍会撑开，应改用minmax(0, 1fr) -
grid-template-columns: auto 100px auto这类写法中，auto轨道会按内容最大宽度分配，中间固定列的margin会进一步压缩可用空间 → 改用1fr 100px 1fr或minmax(0, 1fr) 100px minmax(0, 1fr) -
max-content列会强制按内容最大宽分配 → 避免直接使用，改用minmax(0, max-content)或显式minmax(0, 200px)
绝对定位子元素溢出时别只盯 overflow
给 Grid 容器加 overflow: hidden 对 position: absolute 子元素无效，因为裁剪只发生在「定位上下文 + overflow」双重生效时：
- Grid 容器默认不是定位上下文 → 必须显式加
position: relative - Flex/Grid 容器即使触发 BFC，也不自动创建包含块 →
position: relative缺一不可 - 若想让 tooltip、下拉菜单“破框而出”，硬调
z-index没用，得把元素移出裁剪容器（如用 React Portal 或 Vue Teleport 挂到body下） - 纯 CSS 方案可试
overflow: clip（Chrome 119+、Firefox 111+ 支持），语义更准确，且不隐式创建层叠上下文
最容易被忽略的是 computed 样式里 min-width 的真实值——缓存、作用域、继承覆盖都可能让它还是 auto。真不生效，先打开开发者工具看 computed 面板，确认是不是 0px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
