flex容器需设明确高度（如min-height:100vh）才能使align-items:stretch生效；align-items是容器属性，子元素设置无效；子项须为标准flex子项，禁用float/inline-block；内容区嵌套flex时需加min-height:0防坍缩。
flex 容器必须有明确高度才能让 align-items: stretch 生效
很多人写好 display: flex 和 align-items: stretch 后发现侧边栏和内容区还是不等高，根本原因是父容器（比如 .layout）没有设置高度。stretch 不会“凭空拉伸”，它只在父容器有**确定的块级高度**（如 height: 100vh、min-height: 100vh 或固定像素值）时才起作用。
常见错误写法：
.layout {
display: flex;
}
.sidebar, .main {
align-items: stretch; /* ❌ 错：align-items 是容器属性，不能写在子元素上 */
}正确做法：
- 把
display: flex和align-items: stretch（默认值，可省略）写在父容器上 - 给父容器加
min-height: 100vh（推荐）或height: 100vh - 确保子元素没设置
height、max-height或flex-shrink: 0等干扰拉伸的规则
侧边栏和内容区要用 flex 子项语义，别用 float 或 inline-block
如果侧边栏用了 float: left，或者内容区用了 display: inline-block，那它们就不是 flex 子项，align-items 完全无效。
立即学习“前端免费学习笔记（深入）”；
必须保证结构是标准 flex 布局：
<div class="layout"> <aside class="sidebar">菜单</aside> <main class="main">正文</main> </div>
对应 CSS：
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 240px;
/* 不要设 height，让 stretch 自动撑开 */
}
.main {
flex: 1;
/* 同样不要设 height */
}内容区内部高度不足时，侧边栏会被“压塌”——得靠 min-height: 0
如果 .main 里嵌套了另一个 flex 容器，而它的子元素又设置了 height: 100%，浏览器可能因循环依赖无法计算高度，导致整个 .main 高度坍缩，侧边栏也被拖垮。
典型触发场景：内容区里用了 display: flex; flex-direction: column，又给子项设了 flex: 1。
解决方法是在 .main 上加 min-height: 0（重置 flex 子项的最小高度约束）：
.main {
flex: 1;
min-height: 0; /* ✅ 关键：允许它被压缩到内容高度，但不会影响 stretch 拉伸侧边栏 */
}这个细节常被忽略，但它是生产环境里最常导致“看起来 flex 写对了却还是不等高”的原因。
替代方案：用 grid 更直观，但兼容性需确认
如果项目支持 IE11 以上，display: grid 是更干净的解法：
.layout {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
/* 无需额外对齐声明，grid 默认列等高 */但注意：grid 在老版本 Safari（min-height 组合。
真正卡住的往往不是语法，而是父容器高度缺失、子项脱离 flex 流、或内部嵌套破坏了高度继承链——检查这三点，比反复调 align-items 有用得多。
