grid中flex子元素“失效”主因是空间未分配：grid容器需设高度，grid item和flex容器均须加min-height:0或height:100%，文本截断需两层min-width:0，固定轨道高度应改用minmax()或加overflow。
Grid 容器里嵌 Flex 子元素“失效”，90% 是因为 Flex 容器没拿到可伸缩的空间，而不是 display 属性被覆盖或写错了。
Flex 容器在 Grid 单元格里不撑开高度/宽度
典型表现：Grid 单元格明明设了 grid-template-rows: 1fr，但里面的 display: flex 容器高度为 0，子项堆成一团、justify-content 完全没反应。
- Grid Item 默认按内容收缩，不会自动拉伸填满轨道 —— 即使写了
flex: 1，父级没给空间，Flex 就无从计算“1”是多少 - 必须确保 Grid 容器自身有明确高度（如
height: 100vh或min-height: 400px） - Grid Item（即 Flex 容器的直接父元素）要加
min-height: 0或height: 100%，解除默认最小尺寸锁定 - Flex 容器自己也要加
min-height: 0（Chrome 下尤其关键），否则会被父级的align-items: stretch拉伸逻辑干扰
Grid + Flex 嵌套时文本截断（text-overflow: ellipsis）不生效
现象：长文本顶破单元格右边界、出现横向滚动条、省略号死活不显示。
- 问题不在
overflow: hidden写没写，而在两层都缺min-width: 0：Grid Item 本身要加，它内部的 Flex 容器也要加 -
min-width: 0必须写在 Flex 容器上（即 Grid Item 的直接子元素），不能只写在孙子节点 - 若 Flex 容器里还有需要截断的文本块，那个块还得再加一遍
min-width: 0，并配齐white-space: nowrap、overflow: hidden、text-overflow: ellipsis和max-width: 100% -
min-width: 0px或min-width: 0%在 Firefox 中可能被忽略，只能用无单位的min-width: 0
Grid 轨道固定高度导致 Flex 内容被意外裁剪
比如 grid-template-rows: 100px，里面 Flex 设了 flex-direction: column，子项总高超限，内容直接消失或溢出隐藏。
- 这不是 Flex 失效，是 Grid 轨道没留弹性空间 ——
100px是硬性上限，Flex 不会突破 - 改用
minmax(100px, auto)或min-height: 100px，让轨道能随内容扩展 - 如果必须固定高度，Flex 容器要加
overflow: auto或overflow: hidden，且所有子项需有min-width: 0和box-sizing: border-box - 避免在 Grid Item 上同时设
align-items: stretch和height: fit-content，后者会覆盖前者
调试时优先检查这三处 computed 样式
打开 DevTools → Elements → Computed 面板，直接搜关键词：
-
min-width：看 Flex 容器和它的直接父级（Grid Item）是否仍是auto -
height和min-height：确认 Grid 容器、Grid Item、Flex 容器三层是否有可计算的高度值 -
display：验证 Flex 容器的display确实是flex，没被其他规则（如!important或预处理器嵌套错误）覆盖
真正容易被忽略的是：Grid Item 和 Flex 容器这两层的 min-width: 0 或 min-height: 0 必须同时存在，漏掉任何一层，布局就卡在半途。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
