子元素“看不见”但dom还在，应先检查visibility和opacity属性是否被设为hidden或0；二者均保留文档流和flex计算，仅视觉隐藏。
子元素“看不见”但DOM还在，先查 visibility 和 opacity
很多情况下子元素没消失，只是被视觉隐藏了。常见误判是直接翻 DOM 看不到元素就以为被删了，其实可能是 visibility: hidden 或 opacity: 0 导致的。
检查方式很简单：打开浏览器开发者工具，选中那个“消失”的子元素，在 Styles 面板里搜 visibility 和 opacity，看是否被显式设为 hidden 或 0。
-
visibility: hidden元素不可见，但仍在文档流中，仍参与 Flex 计算（比如影响justify-content位置） -
opacity: 0同样保留布局，但会响应鼠标事件——如果点击没反应，可能还加了pointer-events: none - 不要只依赖眼睛判断，务必看 computed styles 里的最终值
overflow: hidden 失效？重点盯 min-width: 0
Flex 容器下，子元素设了 overflow: hidden + text-overflow: ellipsis 却不生效，90% 是因为父级（或自身）缺了 min-width: 0。
原因在于：Flex 项默认有 min-width: auto，它会阻止内容被压缩到 0，导致 overflow 根本不触发。
- 给需要裁剪的子元素加
min-width: 0（横向 Flex）或min-height: 0（纵向 Flex） - 如果该子元素本身是
flex: 1，min-width: 0仍必须显式声明，不能省略 - 若子元素内嵌
img，额外加max-width: 100%，否则图片会撑破限制 - 注意：父容器自身得有明确宽度约束（比如
width: 300px或max-width），否则子项再怎么缩也没意义
子元素真被“吃掉”了？检查 display: none 是否误用
Flex 容器对 display: none 的处理很彻底：一旦某个子元素设了它，这个元素就从 Flex 布局中完全消失，不再参与任何计算——gap、flex-grow 分配、justify-content 对齐都会重排。
这不是 bug，是设计行为。但容易引发意料之外的跳变，尤其在折叠/展开场景。
- 如果只是想临时隐藏，别用
display: none，改用flex: 0 0 0+overflow: hidden+height: 0（横向则用width: 0） - 若需保持占位又不可见，组合
visibility: hidden+flex: 0 0 auto - 用 JS 切换时，避免直接操作
style.display，优先通过 class 控制，比如.item.hidden { visibility: hidden; flex: 0 0 auto; }
滚动条不出现？大概率是 align-items: stretch 在作祟
当父容器是 Flex 且高度固定（比如 position: fixed + top/bottom），它的直接子元素默认会被拉伸填满高度，哪怕内容远超可视区——结果就是没溢出，自然不滚动。
这是最隐蔽的“隐藏”：内容没丢，只是被强制压扁了。
- 解除拉伸：给子元素加
align-self: flex-start或align-self: flex-end - 或在子元素上设
min-height: 0（配合overflow: auto才能生效） - 如果子元素自己也是 Flex 容器，确认它没被父级的
align-items连锁影响 - 特别注意：仅给父容器设
overflow: auto不够，必须让内部真实产生溢出，否则滚动条永远不会出来
真正难调试的从来不是“元素不见了”，而是“元素还在，但表现不像你预期的那样”。Flex 的隐式行为（如 stretch、min-width: auto）比显式样式更容易埋坑，每次怀疑被隐藏，先查这三处：visibility、min-width、align-items。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
