移动端左右两栏等高需确保父容器用min-height: 100vh而非height: 100vh，避免iOS Safari viewport变化导致塌陷；子项禁用height、min-height、align-self等覆盖stretch的属性，优先用padding或伪元素解决视觉空缺。
移动端左右两栏等高不是靠“强行拉伸”，而是让 align-items: stretch 有可靠的高度基准可依；90% 的失效源于父容器用 height: 100vh 或子项写了 height: 100%，这两处必须改。
父容器必须用 min-height: 100vh，不能用 height: 100vh
iOS Safari 在地址栏收起/展开时会重算 100vh，可能瞬间归零，导致 stretch 失去拉伸依据，两栏视觉塌陷。而 min-height: 100vh 是下限保障，能扛住 viewport 动态变化。
- 若父容器嵌套在 SPA 路由出口（如
），需确保上层也设display: flex和高度约束，否则min-height无继承来源 - 避免对父容器加
overflow: hidden，它可能触发 BFC 干扰高度计算链 - 不推荐用
height: 100%—— 它依赖所有祖先显式设高，移动端极易断裂
子项禁用 height、min-height、align-self 类属性
align-items: stretch 是默认行为，但会被子项自身样式覆盖。只要子项写了以下任一，等高就立即失效：
-
height、max-height、min-height（哪怕只是min-height: 0） -
align-self: flex-start、align-self: center等显式声明 -
img或iframe等替换元素未设align-self: stretch，可能按 baseline 对齐，看起来矮一截
正确做法是：子项只设 flex: 0 0 auto（固定栏）或 flex: 1（自适应栏），其余交由 stretch 自动处理。
内容太少时视觉“塌陷”，别乱加 height: 100%
技术上已等高，但某栏只有标题或图标，视觉上仍显空——这不是 Flex 失效，是缺乏锚点。此时：
- 优先加
padding-bottom: 1rem，成本低、兼容稳 - 需要底部对齐时，用
::after伪元素 +flex: 1占满剩余空间 - 绝对避免给子项加
height: 100%或min-height: 100%—— 它们会覆盖 stretch，且在软键盘弹出时大概率崩掉 - 若真需最小高度，用绝对值：如
min-height: 44px（符合移动端点击热区规范）
嵌套结构中，内层容器也要主动撑开高度
常见翻车点：外层设了 display: flex，但主内容区（如 ）没占满剩余空间，导致其内部子项无法获得 stretch 基准。
- 外层容器设
flex: 1或min-height: 100vh - 主内容区本身也要设
display: flex+flex: 1，才能把高度传递下去 - 慎用
position: sticky或position: fixed套在 flex 子项里——它们脱离文档流，stretch就算空转 - Tailwind 用户注意：
items-stretch是默认值，显式写出来通常没必要；失效多因 class 顺序覆盖，比如h-24或self-start直接关掉了 stretch
真正卡住的从来不是怎么写 flex，而是哪一层悄悄断掉了高度传递链——从外层 min-height 开始查，一路向下扫 height 和 align-self，基本就定位到了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
