本文解决 Flex 容器中子项（flex item）在主轴方向无法根据剩余空间自动收缩并启用内容滚动的问题，核心在于修正 flex-shrink 行为并设置 min-height: 0 或 overflow: hidden 以激活弹性盒子的尺寸收敛机制。
本文解决 flex 容器中子项（flex item）在主轴方向无法根据剩余空间自动收缩并启用内容滚动的问题，核心在于修正 `flex-shrink` 行为并设置 `min-height: 0` 或 `overflow: hidden` 以激活弹性盒子的尺寸收敛机制。
在使用 Flexbox 构建动态布局（如右下角悬浮面板、信息弹窗等）时，一个常见却易被忽视的陷阱是：即使设置了 overflow-y: auto 和 max-height，内容仍不触发滚动，而是撑开父容器或溢出可见区域。根本原因在于 —— Flex 子项默认具有 min-height: auto（块级）或 min-width: auto（行内），这会阻止其在主轴方向上收缩至小于内容自然高度，从而让 overflow 失效。
以本例中的 .info 元素为例：它位于垂直方向的 Flex 容器（.overlay）底部，期望行为是：
- 初始状态下紧凑贴合内容；
- 当内部
.content高度增长、超出可用垂直空间时，自身不再拉伸，而是限制高度并启用.info-content-wrapper的滚动。
但原始代码中 flex-shrink: 0 显式禁止了收缩，而 max-height: 100% 又因百分比高度在 Flex context 中需依赖明确的边界（而非“剩余空间”）而失效。
✅ 正确解法仅需两步：
-
移除
flex-shrink: 0—— 允许.info参与 Flex 布局的收缩计算； -
添加
min-height: 0（推荐）或overflow: hidden—— 这是关键！它覆盖浏览器对 flex item 的默认min-height: auto限制，使该元素可收缩至任意小高度（包括 0），从而让max-height或父容器剩余空间真正生效。
以下是精简后的核心 CSS 片段：
.info {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
background-color: orange;
padding: 10px;
/* 移除 flex-shrink: 0 */
min-height: 0; /* ✅ 关键：启用主轴方向收缩能力 */
}
.info-content-wrapper {
padding: 5px;
overflow-x: hidden;
overflow-y: auto; /* 滚动在此生效 */
max-height: 100%; /* 现在 100% 指向 .info 的可用高度 */
}
⚠️ 注意事项：
-
min-height: 0是语义最清晰、兼容性最佳（Chrome 21+, Firefox 20+, Safari 9+）的方案；overflow: hidden虽有同样效果，但可能意外裁剪边框或阴影，不推荐用于视觉容器。 - 不要依赖
height: 100%或max-height: 100%在未设min-height: 0的 flex item 上 —— 百分比高度在 Flex 子项中始终相对于父容器总尺寸，而非“剩余空间”。 - 若需更精细控制（如保留最小高度），可用
min-height: 40px替代0，但必须显式声明才能覆盖默认行为。
最终效果：.info 将智能占用 .overlay 中 .controls 占位后所余的全部垂直空间，并在其内容超限时，由 .info-content-wrapper 提供平滑滚动，无需 calc()、JS 测量或绝对定位 hack —— 纯 CSS Flexbox 即可稳健实现。
