Flex嵌套超两层会触发真实性能瓶颈，因每层需独立执行主轴与交叉轴遍历，三层即三次完整layout pass并引发连锁重排；align-items: stretch在深层中易导致layout cascade，contain: layout style paint须加于直接子项才有效。
Flex嵌套超过两层就会触发真实性能瓶颈，不是“看起来卡”，而是 Chrome Layout 阶段频繁超 16ms/frame —— 这会直接导致滚动掉帧、下拉刷新卡死、动画抖动。
为什么三层 Flex 嵌套会让 Layout 时间翻倍
每层 display: flex 都要独立执行一次主轴 + 交叉轴遍历：计算弹性系数、测量子项内容、分配剩余空间。三层嵌套 = 3 次完整 layout pass，且存在连锁重排风险。
- 典型坏结构：
.list-wrapper → .row → .card → .content → .avatar，其中.row和.content完全可降级为普通div - 验证方式：Chrome DevTools → “Rendering” 面板 → 勾选 “Layout Shift Regions”，嵌套越深，高亮区域越大
- iOS Safari 12–14 对此极度敏感，下拉后可能直接冻结 UI 线程
align-items: stretch 是隐藏的重排放大器
这个默认值在深层嵌套中极易引发 layout cascade：父容器 stretch → 子项重测高度 → 子项内嵌 flex 容器再次 stretch → 再次重测……尤其当子项含文本或图片时，测量开销指数级上升。
- 常见场景：
.card { display: flex; flex-direction: column; align-items: stretch; }+ 内部标题/描述/按钮 - 替代方案：对固定尺寸元素（如图标）显式设
flex: 0 0 24px；对文字区用flex: 1 1 max-content，避免从零开始分配空间 - 更彻底的解法：用
aspect-ratio或显式height替代 stretch 的动态拉伸逻辑
contain: layout 只对直接子项有效，加错位置反而更慢
contain: layout style paint 能隔离子树布局影响，但它的生效前提是——必须加在 flex 容器的**直接子项**上，比如 .card、.item 这类语义独立块。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误加在容器本身：
.list-container { contain: layout; }→ 破坏渲染连贯性，滚动更卡 - ❌ 错误加在动画元素上：
.btn { transform: scale(1.1); contain: layout; }→ 强制浏览器放弃 GPU 加速路径 - ✅ 正确用法：
.card { contain: layout style paint; }，配合gap控制间距，不新增格式化上下文 - 兼容性注意：Safari 15.4+ 才稳定支持，旧版 iOS 需降级为
overflow: hidden+min-height: 0
真正难处理的不是“怎么加 containment”，而是识别哪些子项值得加——它只对尺寸稳定、无频繁 DOM 变更的块有效；一旦里面包含 React/Vue 动态列表或频繁增删的 el.classList，containment 反而会放大重排范围。
