flex容器在小程序中高度坍塌的根本原因是ios webkit引擎对无明确尺寸的flex子项（尤其是text）将flex-basis计算为auto后过度压缩，导致父容器无法获得有效高度；解决需为容器及子项设min-height: 1em等可缩放值，并避免text直接作为flex子项。

Flex容器在小程序里高度坍塌的直接原因

根本不是你写错了 display: flex，而是微信小程序底层渲染引擎（iOS 用 WebKit，Android 多为 Blink）对 flex 子项未设明确尺寸时的「收缩行为」处理不一致。尤其当子项是空内容、纯文本或仅含 text 组件时，iOS 下的 WebKit 会把子项的 flex-basis 算作 auto 后进一步压缩到最小，导致父容器无法获得有效高度，最终整个 Flex 容器高度塌成 0。

为什么 view 套 text 在 iOS 上特别容易塌

微信小程序中 text 是行内元素，且默认不参与块级高度计算；当它作为 Flex 子项又没显式设 min-height 或 height，WebKit 就会忽略其“撑高”能力。而 Android 的 Blink 引擎更宽容，常按内容自然撑开。

• text 不继承父容器的 height，也不响应 flex: 1 的拉伸（除非父项设了固定高度）
• 空 text 或仅含空格的 text 在 iOS 上几乎不占高度
• 即使写了 line-height，若父容器没设 min-height，仍可能被压缩归零

真正有效的防塌方案（不是加 min-height: 1px 就完事）

加个 min-height 能临时遮掩问题，但一遇到动态内容或字体加载延迟，还是会闪一下。必须从结构和渲染逻辑上堵死。

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

• 给 Flex 容器加 min-height: 1em 或具体值（如 min-height: 40rpx），比 1px 更可靠，因它随字体缩放
• 所有直接子项（尤其是 text 或空 view）显式设 min-height: 1em 或 height: 1em
• 避免让 text 单独作为 Flex 子项 —— 改用 view 包一层，并设 display: flex; align-items: center;
• 若用 flex-direction: column，确保至少一个子项有明确 flex: 1 且父容器有 height 或 min-height

别踩这个坑：以为 align-items: stretch 能自动撑高

它只对「没有设定明确高度」的子项生效，但前提是子项本身能产生内容高度。而 text 在 iOS 小程序里经常连“内容高度”都算不出来 —— 所以 stretch 实际失效。这时候强行依赖它，等于把渲染交给浏览器猜。

最稳的做法，是让至少一个子容器承担“高度锚点”角色：比如用 view 包住 text，并设 height: 100%; min-height: 1em;，再配合 overflow: hidden 防文字溢出错位。复杂页面里，这点控制权不能让渡给引擎。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！