当使用 height: 100% 的 flex 子元素配合 overflow: auto 时，若未正确约束其计算高度，浏览器可能忽略溢出控制而使容器持续撑高——根本原因在于 flex 项默认不主动收缩至内容之外，需通过 min-height: 0 或显式尺寸约束来激活滚动机制。
当使用 `height: 100%` 的 flex 子元素配合 `overflow: auto` 时，若未正确约束其计算高度，浏览器可能忽略溢出控制而使容器持续撑高——根本原因在于 flex 项默认不主动收缩至内容之外，需通过 `min-height: 0` 或显式尺寸约束来激活滚动机制。
在现代 CSS 布局中，尤其是基于 Flexbox 的垂直居中或全屏结构中，开发者常会为子容器设置 height: 100% 并期望其内部列表在超出时触发滚动（overflow-y: auto）。但实际中，如 JSFiddle 示例 所示：当 .list 内容增多时，.wrapper 整体高度失控，导致页面出现双重滚动（外层 body 和内层 .list 同时可滚），违背设计预期。
问题本质：Flex 容器中的子项（如 .list-container）即使设置了 height: 100%，在 flex-direction: column 下，其 默认的 min-height: auto 会阻止它收缩，导致 height: 100% 失效——浏览器优先尊重内容高度而非百分比声明，overflow 因此无法生效。
✅ 推荐解决方案（语义清晰、无需 hack）：
为 .list-container 显式添加 min-height: 0，强制其参与 flex 高度分配，并允许内部 height: 100% 正确解析为“可用空间”：
.list-container {
display: flex;
flex-direction: column;
padding: 20px;
width: 50%;
height: 100%; /* 依赖父容器高度 */
min-height: 0; /* ✅ 关键修复：启用收缩行为 */
}
.list {
height: 100%; /* 现在能正确取到可用高度 */
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #000;
/* 可选：增强滚动体验 */
scrollbar-width: thin;
}? 为什么 min-height: 0 有效？
根据 CSS Flexbox 规范，flex 项的 min-height: auto 表示“至少为内容高度”。设为 0 后，该项即可自由收缩，height: 100% 才能相对于父 flex 容器的剩余可用空间计算，从而让 overflow 生效。
⚠️ 其他常见误区与注意事项：
- ❌ 不要滥用 position: absolute（如答案中建议的 transform: translate(-50%, -50%)）：它脱离文档流，破坏 flex 布局语义，且难以响应式适配；
- ❌ 避免仅靠 max-height 临时补救：未解决 flex 收缩机制问题，边界情况仍可能失效；
- ✅ 若父容器（.wrapper）本身无明确高度来源，需确保其祖先链（如 html, body）已设 height: 100% 且无 margin/padding 干扰；
- ✅ 推荐为 .list 添加 box-sizing: border-box，避免边框/内边距影响高度计算。
最终验证效果：
添加 min-height: 0 后，.list-container 将严格限制在 .wrapper 的可用高度内；.list 在内容超限时自动显示垂直滚动条，外层页面不再产生额外滚动，布局完全可控。
总结：Flex 布局中 height: 100% 的失效，往往源于对 min-height 默认行为的忽视。min-height: 0 是解决“100% 高度不收缩”问题的标准、轻量且符合规范的方案，应作为 flex 子项高度控制的必备实践之一。
