flex子元素高度不随容器撑开，因父容器缺显式高度导致height:100%失效；需设容器height（如100vh），并用flex:1+min-height:0实现自适应高度与滚动。
flexbox 中子元素高度不随容器撑开？
默认情况下，flex 容器的子元素不会自动拉伸填满剩余高度，哪怕设置了 height: 100% 或 min-height: 100vh。根本原因是：父容器没有显式高度，而 height: 100% 在 flex 布局中依赖于“可计算的高度”，不是靠 flex 自动推导的。
- 必须给 flex 容器设置明确高度（如
height: 100vh、height: 400px或min-height: 100vh） - 若容器嵌套在 body 中，确保
html和body也设了height: 100%，否则100%会失效 -
align-items: stretch是 flex 默认值，但仅对“无固有高度”的子元素生效；如果子元素写了height: 200px或min-height，就会覆盖拉伸行为
让某个子项占满剩余高度（比如 sidebar + main 布局）
典型场景：左侧固定宽 sidebar，右侧 main 区域需填满剩余空间并自适应高度。关键不是靠 height: 100%，而是用 flex: 1 配合方向控制。
- 容器设
display: flex+flex-direction: row（横向布局） - sidebar 不设
flex，或设flex: 0 0 240px（不缩放、不增长、固定宽） - main 元素设
flex: 1—— 这会让它吸收所有剩余空间，包括高度（前提是容器高度已确定） - 若 main 内部还需子元素撑满高度（如 header + content），则需在其内部再设
display: flex; flex-direction: column; height: 100%
.container {
display: flex;
flex-direction: row;
height: 100vh; /* 必须有明确高度 */
}
.sidebar {
width: 240px;
background: #f0f0f0;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 64px;
background: #333;
}
.content {
flex: 1;
background: #fff;
overflow-y: auto;
}
滚动区域内容高度自适应但不溢出容器
常见错误是给 .content 设 height: 100%，结果滚动条失效或内容被截断。正确做法是用 flex: 1 + min-height: 0（防止 flex 项目最小高度干扰）。
- 当 flex 子项内含滚动内容时，浏览器默认会给它一个最小高度（通常为内容高度），导致无法收缩
- 必须显式加
min-height: 0或overflow: hidden才能让flex: 1正常生效 - 滚动容器本身应设
overflow-y: auto，且不能有height冲突（比如同时写height: 100%和flex: 1）
IE11 下 flex 高度自适应失效的典型补救
IE11 对 flex: 1 的解析存在 bug，尤其在嵌套 flex 容器中，常表现为子项高度塌陷或不响应 flex: 1。这不是兼容性开关问题，而是渲染逻辑缺陷。
立即学习“前端免费学习笔记（深入）”；
- 避免多层
flex: 1嵌套，尽量扁平化结构 - 对 IE11 特别处理：给需要拉伸的元素加
flex-basis: 0（即flex: 1 1 0） - 确保父容器有
height，且不要依赖max-height或min-height单独驱动拉伸 - 必要时用
display: -ms-flexbox+ 对应旧版属性兜底（如-ms-flex: 1）
flex 高度自适应最易忽略的点，其实是「高度来源」——它永远来自父容器的显式高度，而不是 flex 自身的 magic。一旦漏掉某一层的 height 或写错 flex-direction，整个链路就断了。
