css flexbox与高度自适应布局_让元素自适应容器高度_技术教程

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;
}