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，整个链路就断了。