Flex嵌套三层以上会触发多层重排计算，因每层尺寸依赖形成链式回流，导致iOS 12 Safari等旧内核卡顿200ms+；应至少一层设固定高度或min-height: 0断开继承链，慎用中间层flex: 1，并为所有含不确定宽度内容的容器加min-width: 0。
Flex嵌套三层以上触发多层重排计算
浏览器对 Flex 布局的优化集中在「单层主轴计算」，但嵌套三层时（比如 .outer → .middle → .inner → .item），每层容器都可能因尺寸依赖关系被迫重新测量。例如：.middle 的高度由 .outer 的 flex: 1 决定，而 .inner 又要撑满 .middle，最后 .item 还带 flex-wrap: wrap —— 这种链式依赖会让 WebKit 内核（如 iOS 12 Safari、Android 4.4 WebView）反复回流，尤其在文本内容动态插入后。
常见错误现象：scroll 或 resize 事件中 JS 修改任意一层的 textContent，整块区域卡顿 200ms+，Performance 面板可见连续 Layout 耗时飙升。
- 避免让三层容器都参与「弹性伸缩」：至少有一层固定尺寸（如
height: 400px）或设min-height: 0断开继承链 - 慎用
flex: 1在中间层：它要求父容器有可测量主轴尺寸，否则计算结果为0px，后续子层全部失效 - Chrome DevTools 中检查
computed height，若某层显示0px，基本可确认是尺寸约束断裂
IE11 和旧版 Safari 对嵌套 flex-direction: column 的识别失效
IE11 和 Safari ≤ 9 对 flex-direction: column 在嵌套第二层之后的支持极差。典型表现是：外层 row 正常，中间层设了 display: flex; flex-direction: column，但最内层 flex: 1 完全不生效，height 计算为 auto，导致容器塌陷、文字溢出、滚动异常。
这不是写法错，而是渲染引擎根本没把该层当 Flex 容器处理——它退回到普通文档流，连 align-items 都被忽略。
立即学习“前端免费学习笔记（深入）”；
- 必须给每一层显式声明
display: flex，不能依赖继承 - 对
column嵌套，优先用height: 100%替代flex: 1，并在父层加min-height: 0 - 用
@supports (display: flex) and (flex-direction: column)包裹关键样式，避免老内核解析崩溃
未设 min-width: 0 导致横向无限撑宽
嵌套越深，越容易漏掉 min-width: 0。一旦某层容器内含长单词、<img alt="为什么CSS Flex嵌套三层以上在部分老旧机型会出现卡顿" > 或未限制宽度的 SVG，且该容器又没设 min-width: 0，浏览器会尝试按内容原始宽度撑开它。这不仅触发横向滚动条，还会迫使上层所有 Flex 容器重新计算主轴空间，形成连锁重排。
在低端 Android 设备上，这种撑宽常伴随 60fps 直接掉到 20fps，尤其配合 transform 动画时更明显。
- 所有可能含不确定宽度内容的 Flex 容器，都应加
min-width: 0 - 特别注意 Vue/React 组件中动态插入的
<div>，它们的默认 <code>min-width是auto，不是0 - 不要只在外层加：嵌套第三层的容器同样需要，否则第二层的
flex-basis会被错误拉伸 - 旧环境降级用
margin模拟gap：给子项加margin-right/margin-bottom，并用:last-child清除末尾 - 避免在嵌套中间层使用
gap，只保留在最外层容器 - PostCSS autoprefixer 不会补全
gap兼容性，需手动控制
gap 属性在旧 WebView 中引发布局抖动
gap 看似安全，但在 Android 4.4–6.0 的 WebView 中，它和嵌套 Flex 结合时会导致「布局抖动」：页面首次渲染正常，但滚动后部分子项突然偏移几个像素，getBoundingClientRect() 返回值跳变。这是因为这些内核把 gap 当作 margin 处理，却没同步更新交叉轴对齐逻辑。
实测发现，三层嵌套 + gap: 1rem + align-items: center 组合，在 Nexus 5X 上 100% 复现。
min-width: 0，结果整条链路都在瞎猜尺寸。
