flex布局中子元素height:100%无效主因是父容器缺显式高度；应优先用flex:1实现自适应高度，需确保父容器有高度基准（如100vh），并避免与height混用。
flex布局中子元素高度不生效的常见原因
直接给 flex 容器的子元素设 height: 100% 通常无效，因为父容器（即 flex 容器）本身没有显式高度，百分比高度失去参照。Flex 子项默认按内容撑开，不是靠百分比继承。
- 确保父容器有明确高度（如
height: 100vh或固定值），否则height: 100%无意义 -
flex容器上需设置display: flex和flex-direction: column（若需垂直铺满） - 让子项“占满剩余空间”应优先用
flex: 1，而非height: 100% - 避免同时写
flex: 1和height: 100%，后者可能被 flex 计算覆盖
用 flex: 1 实现自适应高度的可靠写法
这是最稳定、语义最清晰的方式：让某个子元素自动填充父容器剩余空间，不受父容器是否设了具体高度影响（只要父容器自身能获得高度）。
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 必须有高度基准 */
}
.header { height: 60px; }
.main { flex: 1; } / 自动撑满剩余空间 /
.footer { height: 40px; }
-
flex: 1等价于flex: 1 1 0，表示可伸缩、无初始尺寸，最适合填空场景 - 多个
flex: 1元素会均分剩余空间；加权重可用flex: 2/flex: 1 - 若主区域还需内部滚动，给
.main加overflow-y: auto即可，无需额外高度计算
百分比高度在 flex 布局中何时能用
只有当整个高度链上每个父级都有**明确的高度值**（非 auto）时，height: 100% 才会逐层传递下去。这在 flex 布局中极难保证，尤其嵌套较深时。
- 适用场景极少：比如全屏弹窗内一个绝对定位的 flex 容器，其父已设
height: 100%且祖先都设了高度 - 错误典型：
html, body { height: 100% }不足以支撑后代的height: 100%，中间任意一层是display: block且未设高度就会断掉 - 相比
flex: 1，百分比高度更脆弱、调试成本高，不建议作为主力方案
移动端或动态内容下的兼容性注意点
iOS Safari 对 flex: 1 在某些嵌套滚动场景下有渲染延迟，表现为高度闪动或未及时更新。这不是 bug，而是视口高度计算时机问题。
立即学习“前端免费学习笔记（深入）”；
- 避免在
position: fixed容器内直接用flex: 1做高度填充，改用min-height: -webkit-fill-available临时兜底 - 动态插入内容后，若高度没重绘，可对容器触发一次
transform: translateZ(0)强制重排 - 不要依赖
100vh在 iOS 上的精确性——地址栏收起/展开会改变它，用100dvh（如支持）或 JS fallback 更稳妥
实际项目里，flex: 1 是解决自适应高度最轻量也最可靠的手段，但它的前提是父容器得有“高度源头”。这个源头往往藏在最外层，容易被忽略。
