加了display: flex但两列不等高，大概率是父容器无可信高度或子项显式设height/min-height/align-self等导致拉伸失效；需确保父容器有min-height: 100vh或被上级flex/grid约束，且所有子项未退出拉伸队列。
加了 display: flex 但两列还是不等高，大概率是父容器没真正“有高度”，或者子项悄悄关掉了拉伸行为。
父容器必须有可信的高度来源
Flex 子项默认靠 align-items: stretch 拉伸等高，但它需要一个可参照的交叉轴尺寸。如果父容器 height 是 auto，且上层没给约束，computed height 就是 0 —— stretch 就成空转。
- 临时加
height: 400px测试：立刻等高，说明问题就在这儿 - 生产环境别写死
height，改用min-height: 100vh（首屏稳）或让父容器被上级flex: 1/grid限制 - SPA 路由容器常漏设高度，导致子路由里
min-height: 100%失效 ——%需要所有祖先显式设高，链一断就归零
子项不能主动“退出拉伸队列”
哪怕只在一个子项上写了以下任一声明，它就会脱离等高计算，其他列也会跟着“塌”下去：
-
height、max-height、min-height（包括min-height: 0） -
align-self: flex-start、align-self: center等显式值 -
display: table-cell或float: left—— 直接脱离 flex flow - 图片、
iframe等替换元素自带min-height: auto，需加min-height: 0才释放拉伸空间
注意 flex-direction 和 wrap 的影响
flex-direction: row（默认）下，交叉轴是垂直方向，stretch 控制高度；一旦误设为 column，交叉轴变成水平方向，stretch 就去拉宽度了，高度完全不管。
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap时，stretch只在每行内生效，跨行不拉齐 —— 若需全列统一高度，得换display: grid+grid-auto-rows: 1fr - IE11 对
flex: 1拉伸支持不稳定，建议写成flex: 1 0 auto或补flex-basis: 0
内容少时视觉“塌陷”不是 Flex 失效
技术上已等高，但只有标题的栏看着矮，是因为缺乏视觉锚点。这不是 bug，而是感知问题 —— 别乱加 height: 100% 或内部 flex: 1，容易破坏流式布局。
- 加
padding-bottom: 1rem让底部有呼吸感 - 需要底部对齐按钮？用
::after+flex: 1占满剩余空间（子项内部设display: flex; flex-direction: column） -
min-height要慎用：它会把整栏撑到最小值，可能让内容被迫滚动或留白过大
真正卡住的从来不是怎么写 flex，而是父容器有没有“真高度”，以及子项有没有偷偷 align-self: flex-start 或塞了个带 min-height: auto 的图片进去。
