Flex项目height:100%需父容器有明确高度（如min-height:100vh），否则失效；应优先用flex:1填满剩余空间，并配合overflow-y:auto和min-height:0控制溢出；IE11需额外处理height:100%兼容性。
flex 容器必须显式定义高度或最小高度
Flex 项目（flex-item）的 height: 100% 不会自动生效，除非父容器（flex-container）本身有确定的高度来源。浏览器无法从“内容撑开”反推高度，所以 height: 100% 在 flex 布局中常失效。
常见错误是只写：
.container { display: flex; }
.item { height: 100%; }——此时 .item 高度为 auto，实际等于内容高度，而非容器高度。
- 正确做法：给
.container设置height、min-height或max-height，例如min-height: 100vh或height: 400px - 若容器高度由视口决定，优先用
min-height: 100vh而非height: 100vh，避免内容超长时被截断 - 嵌套 flex 容器时，每一层都需要检查是否有明确高度约束
使用 flex: 1 替代 height: 100%
在 flex 布局中，让子项“填满剩余空间”的标准方式不是靠百分比高度，而是靠 flex 属性。只要容器主轴方向是垂直（flex-direction: column），且存在可伸缩空间，flex: 1 就能自然拉伸。
典型场景：顶部导航 + 主内容区 + 底部栏，希望主内容区占满中间剩余高度。
-
flex: 1等价于flex: 1 1 0，表示可放大、可缩小、基准尺寸为0，因此能均分剩余空间 - 若需多个项目按比例分配，可用
flex: 2和flex: 1，比例即为 2:1 - 注意：若其他兄弟元素设置了固定高度（如
height: 60px），flex: 1项会自动计算并填充余下空间，无需手动算减法
.container { display: flex; flex-direction: column; min-height: 100vh; }
.header { height: 60px; }
.main { flex: 1; } /* 自动填满剩余高度 */
.footer { height: 40px; }子项内部内容溢出时的高度控制
即使 .main 正确拉伸了，其内部文字、列表或图片仍可能撑高容器，导致整体超出预期。这时候需要控制子项内部的溢出行为。
立即学习“前端免费学习笔记（深入）”；
- 对需要滚动的内容区域，添加
overflow-y: auto并确保其父级（即flex: 1元素）有明确边界 - 避免在
flex: 1元素上同时设height和overflow，容易触发渲染冲突；应只依赖flex+overflow - 若子项含绝对定位元素，它不参与 flex 高度计算，需额外用
top/bottom或inset配合position: absolute来适配动态高度
.main {
flex: 1;
overflow-y: auto;
}
.main > .scrollable-content {
min-height: 0; /* 关键：重置 flex 最小尺寸限制，否则 overflow 可能不生效 */
}IE11 下 flex: 1 高度失效的兼容处理
IE11 对 flex: 1 的实现有缺陷，尤其在嵌套 flex 或与 min-height 混用时，常表现为子项高度塌陷为 0。
- 临时方案：对 IE11 单独加
height: 100%到flex: 1元素上，并确保所有祖先都有height: 100% - 更稳妥做法：用
@supports not (flex: 1)或 UA 检测隔离 IE 样式，避免影响现代浏览器 - 注意：IE11 不支持
min-height: 100vh在 flex 容器上的表现，建议降级为height: 100vh+ JS 动态修正
真正麻烦的不是写法，而是高度链路上任意一环缺失约束——比如忘了给 html 和 body 设 height: 100%，整个 flex 链就断了。
