嵌套容器必须显式设 display: flex，因为Flex布局作用域仅限直接子元素，孙辈不会自动继承；外层设display: flex后，内层若要使用Flex特性（如flex: 1、justify-content等），必须单独声明display: flex，否则仍按普通文档流渲染。
嵌套容器必须显式设 display: flex
Flex 布局的作用域只到直接子元素，父容器设了 display: flex，它的孙辈不会自动继承 Flex 上下文。常见现象是：外层两栏布局正常，但右侧栏里上下两个区块死活对不齐、高度塌陷、flex: 1 不生效——根本原因就是内层容器没加 display: flex。
- 外层容器控制列方向（
flex-direction: row），内层容器若要控制行内子项或垂直撑满，必须单独写display: flex - 如果内层是
<div> 且内容为文字或块级元素，它默认仍是普通文档流，<code>align-items或justify-content在它身上完全无效 - Vue/React 中动态渲染的嵌套盒子，容易漏掉这一层声明，建议在组件样式里统一加
.nested-container { display: flex; } - 典型错误：
.main { flex: 1; }写在嵌套第二层，但它的父容器没有设置height或min-height，计算出的高度就是0 - 解决方案：外层容器加
min-height: 0（防止 flex 项被 height 撑开后忽略收缩），内层容器加height: 100%或flex: 1并确保父容器主轴方向尺寸可测量 - Chrome DevTools 里检查 computed
height，若为0px，基本可断定是尺寸约束缺失 - 写
flex-basis时，必须确认当前容器的flex-direction：row 下用px/%表示宽，column 下表示高 - 想让嵌套子项严格按比例分宽度（比如 3:2），内层容器得是
row，且所有子项flex-basis: 0，否则内容高度会干扰宽度计算 - 避免在 column 容器里给子项写
width: 50%——它和 flex 规则冲突，浏览器优先服从 flex 分配逻辑 - 错误表现：元素存在但不可见，盒模型显示 height=0，
flex-grow完全不触发 - 降级方案：外层用
display: -ms-flexbox，内层改用-ms-flex: 1，并补height: 100% - 更稳妥做法：避免深度嵌套 flex，用
min-height+calc()替代部分flex: 1场景，比如height: calc(100vh - 60px)
flex: 1 在嵌套中依赖父容器尺寸约束
flex: 1 看似简单，但在嵌套结构里常失效，不是写错了，而是父容器没提供可伸缩的主轴空间。比如外层用 flex-direction: column，内层想让某个区块占剩余高度，flex: 1 就要求它的直接父容器有明确高度（如 height: 100% 或 min-height: 0）。
嵌套时 flex-basis 对应的是当前主轴方向
外层是 flex-direction: row，flex-basis 控制宽度；内层换成 column，flex-basis 就变成控制高度。很多人在嵌套里混用 flex: 1 1 200px，结果发现“固定宽度”在内层变成了“固定高度”，视觉错乱。
IE11 嵌套 Flex 的兼容性陷阱
IE11 支持 display: flex，但对嵌套层级中的 flex: 1 和 flex-direction: column 组合几乎不识别，尤其当内层容器需要撑满剩余高度时，computed height 直接为 0。
立即学习“前端免费学习笔记（深入）”；
嵌套比例分配真正卡点不在 flex 属性本身，而在每一层容器是否满足「可测量的主轴尺寸」+「显式 flex 上下文」+「方向与 basis 的匹配」——少一个，比例就失准。
