本文详解如何让 Flex 子项（flex item）在主轴方向（如 column 布局下的垂直方向）自动收缩并启用滚动，解决 max-height: 100% 失效、内容溢出不截断等常见问题。核心在于理解 flex-shrink 与 min-height 对 flex 容器内尺寸计算的影响。
本文详解如何让 flex 子项（flex item）在主轴方向（如 column 布局下的垂直方向）自动收缩并启用滚动，解决 `max-height: 100%` 失效、内容溢出不截断等常见问题。核心在于理解 `flex-shrink` 与 `min-height` 对 flex 容器内尺寸计算的影响。
在使用 Flexbox 构建动态布局（如右下角悬浮面板、信息弹窗等）时，一个典型需求是：
- 父容器（
.overlay）为flex-direction: column，子元素.controls固定高度，.info需占据剩余空间； -
.info内部包含固定头部（关闭按钮）和可变高度内容区（.info-content-wrapper），内容过高时应出现纵向滚动条； - 但直接设置
max-height: 100%无效——因为此时100%指向父容器.overlay的完整高度（300px），而非“扣除.controls后的剩余空间”。
根本原因在于：Flex 子项默认具有 min-height: auto（在 column 主轴下等价于 min-height: min-content），这会阻止其收缩以腾出空间给内部滚动容器。即使设置了 overflow-y: auto，若外层 .info 无法缩小，内部内容就永远没有“溢出”的机会。
✅ 正确解法只需两步：
-
移除
flex-shrink: 0（该声明强制禁止收缩，使.info坚持撑满可用空间）； -
添加
min-height: 0或overflow: hidden（二者等效：overflow: hidden会隐式触发min-height: 0，打破默认的最小尺寸限制）。
修改后的关键 CSS 如下：
.info {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
/* ✅ 移除：flex-shrink: 0; */
background-color: orange;
padding: 10px;
/* ❌ 删除固定 max-height，改用弹性约束 */
overflow: hidden; /* ✅ 关键：启用收缩能力 */
}
.info-content-wrapper {
padding: 5px;
overflow-x: hidden;
overflow-y: auto; /* ✅ 滚动在此生效 */
/* 可选：增强健壮性 */
min-height: 0;
}
此时浏览器会按以下逻辑计算高度：
-
.overlay作为 flex 容器，将剩余空间（100% - height(.controls)）分配给.info； -
.info因min-height: 0可自由收缩，其内部.info-content-wrapper得到明确的可用高度边界； - 当
.content高度超过该边界时，overflow-y: auto自然触发滚动条。
⚠️ 注意事项：
- 不要依赖
max-height: 100%—— 它始终相对于父容器总高，而非“剩余空间”； -
flex: 1或flex: 1 1 auto对.info通常不适用，因其会与justify-content: flex-end冲突，导致位置异常； - 若需兼容旧版 Safari，建议显式写
min-height: 0而非仅依赖overflow: hidden； - 动态显示/隐藏时，推荐用
visibility: hidden+height: 0+overflow: hidden配合过渡动画，避免display: none导致布局重排。
此方案纯 CSS 实现，无需 JavaScript 计算 calc() 或监听 resize，语义清晰、性能优异，是 Flexbox 主轴溢出控制的标准实践。
