flex-shrink 默认只作用于主轴方向，高度属交叉轴时无效；需设flex-direction: column使高度成主轴，并配合flex: 1 1 0、min-height: 0和overflow-y: auto才能可靠收缩。
固定高度容器里内容溢出时，flex-shrink 为什么没起作用？
常见错觉是只要设了 flex-shrink: 1，子项就会自动压缩以适配父容器高度——但 Flexbox 的收缩行为默认只作用于**主轴方向**（即 flex-direction 决定的方向），而高度属于交叉轴。如果容器是垂直布局（flex-direction: column），那高度才是主轴，flex-shrink 才管用；如果是默认的水平布局（row），flex-shrink 压缩的是宽度，对高度毫无影响。
所以第一步必须确认：你要约束的是高度，那就该用 flex-direction: column，让高度成为主轴。
- 父容器需设
display: flex+flex-direction: column+ 明确的height（如height: 300px） - 需要自适应高度的子项（比如正文区域）设
flex: 1 1 auto或简写flex: 1，它才会在剩余空间内拉伸或收缩 - 其他子项（如 header/footer）不要设
flex-shrink: 0以外的收缩策略，否则会干扰计算
align-items 对固定高度容器里的内容“居中”有没有实际压缩效果？
没有。align-items 只控制交叉轴上的对齐方式（比如 center、stretch），它不改变子元素尺寸，也不触发任何收缩逻辑。很多人误以为设了 align-items: center 就能让超高的内容“缩进可视区”，其实只是把内容块在交叉轴上居中摆放，溢出部分依然存在，滚动条照常出现。
真正决定是否溢出、是否可滚动的，是子项自身的 height、max-height 和父容器的 overflow 设置。
立即学习“前端免费学习笔记（深入）”；
-
align-items: stretch（默认值）会让子项在交叉轴上拉满——这在column布局下反而可能撑高容器，要小心 - 若想内容区域不撑高容器且允许滚动，应在该子项上加
overflow-y: auto和min-height: 0（防止 flex item 默认最小高度为内容高度） -
min-height: 0是关键补丁：flex item 默认有min-height: auto，会阻止收缩，必须显式覆盖
一个可靠的工作组合：固定高度 + 自适应内容 + 无意外溢出
下面这个结构能稳定应对内容多少变化，且不依赖 JS：
.container {
display: flex;
flex-direction: column;
height: 400px; /* 固定高度 */
}
<p>.header {
flex: 0 0 auto; /<em> 不伸缩，高度由内容定 </em>/
}</p><p>.main {
flex: 1 1 0; /<em> 关键：基础大小设为 0，强制按剩余空间分配 </em>/
min-height: 0; /<em> 允许收缩到 0 高度（如有必要）</em>/
overflow-y: auto;
}</p><p>.footer {
flex: 0 0 auto;
}-
flex: 1 1 0比flex: 1更可控：第三个参数0表示初始主轴尺寸为 0，避免内容少时留白过大 -
min-height: 0必须和flex: 1 1 0配合，否则flex-shrink在内容超高时仍可能失效 - 如果
.main里还有嵌套 flex 容器，同样要注意其子项是否也设置了min-height: 0
Chrome 和 Safari 在 flex-shrink 处理高度时表现不一致？
是的。Safari（尤其是旧版）对 flex-shrink 在 column 布局下的高度收缩支持较弱，有时即使写了 flex: 1 1 0，内容超高时仍会撑破容器。这不是 bug，而是规范里对“收缩边界”的解释差异导致的实现分歧。
稳妥做法是加一层防御：
- 给
.main同时设置max-height: 100%（配合box-sizing: border-box） - 确保父容器没有 padding 干扰高度计算，或用
calc(100% - Xpx)精确控制 - 在 Safari 中，
flex-basis: 0比flex-basis: 0px更可靠，前者被识别为“无基础尺寸”，后者可能被解析为 0 像素但触发最小尺寸限制
复杂点往往不在 flex 属性本身，而在嵌套层级中某一层悄悄继承了 min-height: auto，或者忘了重置 box-sizing —— 这类细节比 flex 规则本身更容易导致失败。
