Safari嵌套Flexbox性能异常：Angular页面卡顿问题咨询

• 问题本质：Safari在处理多层嵌套的flex容器（尤其是带有flex: 1属性、需要递归计算高度的场景）时，存在布局计算性能瓶颈，会触发指数级的计算耗时，这是WebKit渲染引擎的已知bug。

• 官方Bug记录：这类问题在WebKit官方Bug追踪系统中已有相关报告，核心原因是Safari的Flex布局引擎在处理深度嵌套的flex: 1元素时，会重复执行布局回流计算，计算量随嵌套层数呈指数增长，最终导致页面加载缓慢甚至完全冻结。

• 实现合理性：你的布局逻辑（通过嵌套flex实现元素拉伸至底部+内部容器滚动）符合Flex规范，在Chrome、Edge、Firefox中的表现验证了这一点，问题根源不在实现逻辑本身，而是Safari的渲染优化缺陷。

• 修复方案参考：

  • 精简flex嵌套层级，将部分深层嵌套的flex容器替换为position: relative/absolute结合height: 100%的布局方式，减少递归计算量
  • 对需要滚动的内部容器，显式指定height: 100%或max-height，明确空间约束，避免浏览器反复推导可用空间
  • 给最外层及关键层级的flex容器添加min-height: 0，强制Safari跳过不必要的递归高度校验

内容的提问来源于stack exchange，提问作者JBeen