grid嵌flex溢出的根本原因是flex子项默认min-width:auto穿透grid约束，必须在grid项和其内部flex子项两级均设min-width:0，并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis及box-sizing:border-box等才能生效。
Grid 里嵌 Flex 出现溢出、截断、对齐失效，不是代码写错了，而是两套布局模型的默认行为在“打架”——必须明确在哪一层加什么规则，漏掉任何一环都白搭。
为什么 Grid Item 里的 Flex 容器会横向撑破边界
典型现象：Grid 单元格设了 grid-template-columns: 1fr 2fr，里面放一个 display: flex 容器，容器里有个长 URL 或连续英文单词，整行直接突破右侧，滚动条意外出现。
根本原因不是 Flex 写得不对，而是浏览器默认行为冲突：
- Grid Item 默认
min-width: 0，允许压缩 - 但它的子元素（即 Flex 容器）没显式设
min-width，就按内容自然宽度收缩 → 实际上“太松” - 而 Flex 容器的子项默认
min-width: auto，这个auto会穿透 Grid 的尺寸约束，强行按内容宽度算，不给压缩余地
只加 overflow: hidden 不解决问题——它只藏内容，不改尺寸计算逻辑。
必须加 min-width: 0 的两个关键位置
不是加在 Grid 容器上，也不是随便加在某个 div 上，必须落在“承上启下”的节点上：
-
作为 Grid Item 的 Flex 容器本身要加：
min-width: 0（例如.sidebar { display: flex; min-width: 0; }） -
该 Flex 容器的直接子项也要加：
min-width: 0，尤其是需要弹性伸缩或文本截断的项 - 如果 Flex 容器里还有嵌套 Flex（比如按钮组套在卡片里），那第二层 Flex 的直接子项也得加
min-width: 0
示例结构：
.grid-cell {
display: flex;
min-width: 0; /* 关键：Grid Item 本身要允许压缩 */
}
.grid-cell > .flex-content {
flex: 1;
min-width: 0; /* 关键：Flex 子项也要放开最小宽度限制 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
固定高度 Grid 轨道导致 Flex 内容被截断
现象：grid-template-rows: 100px 这类固定高度轨道，内部 Flex 容器设了 flex-direction: column，子项总高超限，内容直接被剪掉或溢出隐藏。
这不是 Flex 的 bug，是 Grid 轨道没留空间：
- 别用
height: 100px强制压扁 Flex 容器；改用min-height: 100px或grid-auto-rows: minmax(100px, auto) - 如果必须固定高度，Flex 容器要配
overflow: auto或overflow: hidden，并确保子项有min-width: 0和box-sizing: border-box - 图片记得加
max-width: 100%; height: auto;，否则固有尺寸会顶破限制
justify-content / align-items 在嵌套中失效的真正原因
常见误操作：把 justify-content: center 写在 Grid Item 上，结果没反应。
因为这两个属性只对 Flex 或 Grid 容器本身生效。Grid Item 是普通块级盒子，不是 Flex 容器，所以加了也没用。
- 想控制 Flex 子项的对齐，必须把
justify-content和align-items写在那个display: flex的容器上 - 如果 Flex 容器设了
flex-direction: column，主轴变成垂直方向，justify-content就控制上下对齐，align-items控制左右对齐 - 别在同一个元素上同时用
align-self（Grid 层）和align-items（Flex 层）去调同一方向——最终生效的是 computed 样式里实际起作用的那一层
复杂嵌套时，多一层语义化 wrapper 反而更稳：Grid 划区域，wrapper 做 Flex，职责清晰，调试也快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
