父容器必须是display:flex且有可信高度来源；90%不等高因父容器未真正进入flex布局或自身无高度，子项设height/min-height/align-self等会覆盖默认stretch行为。
父容器必须是 display: flex，且有可信高度来源
左右两栏不等高，90% 的原因是父容器没真正进入 Flex 布局，或者它自己“没高度”。display: flex 必须加在**两栏的直接父元素**上，不是加在 body 或某个中间 wrapper 上就完事。
更关键的是：这个父容器得有明确的高度来源。比如：min-height: 100vh、height: 500px，或由上层容器（如 .main）通过 flex: 1 撑开——但前提是它的父级也设置了 display: flex 和高度约束。
- SPA 路由容器常漏设高度，导致子路由里
min-height: 100%失效 -
height: 100%很危险，必须确保所有祖先元素都有显式高度，否则计算链断裂 - 用
min-height: 100vh更稳，尤其对首屏布局
子项不能主动“拒绝拉伸”
Flex 子项默认等高，靠的是 align-items: stretch（默认值），但它会被子项自己的样式覆盖。只要子项写了以下任一属性，等高就失效：
-
height、max-height、min-height（哪怕只是min-height: 0） -
align-self: flex-start、align-self: center等显式声明 - 图片、iframe 等替换元素可能按 baseline 对齐，需加
align-self: stretch强制拉伸
常见翻车点：overflow: hidden + position: relative 套一层再放绝对定位内容，可能触发 BFC，干扰高度计算。
左固定右自适应时，别只写 width
想让左栏固定 240px、右栏占满剩余空间，光给左栏写 width: 240px 是脆弱的——内容超长时会挤压右栏，甚至溢出。
更稳写法是用 flex 缩写：
- 左栏：
flex: 0 0 240px（不增长、不收缩、基准宽 240px） - 右栏：
flex: 1（占据剩余空间，同时保持stretch行为）
避免给右栏加 overflow: hidden 或嵌套 position: absolute 元素，这类操作容易打断高度继承链。
内容太少时视觉“塌陷”，怎么补？
即使技术上已等高，内容极少的栏（比如只有标题）看着还是“矮”，是因为没有足够视觉锚点。这不是 Flex 失效，而是感知问题。
可辅助增强，但别用 height: 100% 或 flex: 1 在子项内部乱加：
- 加
padding-bottom: 1rem让底部有呼吸感 - 用
::after伪元素 +flex: 1占满剩余空间（适合需要底部对齐的场景） - 慎用
min-height，除非你清楚它会把整个栏撑到指定最小值，可能破坏内容流
真正卡住的从来不是怎么写 flex，而是父容器有没有一个不被覆盖、不被截断、不靠猜的高度来源——没这个，stretch 就是空转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
