当使用 height: 100% 的 flex 子项（如列表容器）时，若内容增多，其实际高度可能突破父容器限制并引发整页滚动；根本原因在于 flex 项默认不主动收缩以适应可用空间，需结合 min-height: 0 或 overflow 约束及正确的 flex 布局行为来解决。
当使用 `height: 100%` 的 flex 子项（如列表容器）时，若内容增多，其实际高度可能突破父容器限制并引发整页滚动；根本原因在于 flex 项默认不主动收缩以适应可用空间，需结合 `min-height: 0` 或 `overflow` 约束及正确的 flex 布局行为来解决。
在现代 CSS 布局中，flexbox 是构建响应式、自适应结构的首选方案，但一个常见陷阱是：即使为子元素设置了 height: 100% 和 overflow-y: auto，它仍可能“撑开”父容器，导致意外的全局滚动条出现。这并非 bug，而是 flex 项的默认最小尺寸行为所致——根据 CSS Flexbox 规范，flex-item 的 min-height（垂直方向）和 min-width（水平方向）默认为 auto，即不允许收缩至小于其内容的固有尺寸。
在你的示例中，.list-container 是 .wrapper 的 flex 子项（flex-direction: column），而 .list 又被设为 height: 100%。当列表项增多时，.list 试图占满 .list-container 的全部高度，但 .list-container 自身因未显式限制“可收缩性”，会随内容增长而扩张，最终使 .wrapper 超出视口，触发
滚动。✅ 正确解法不是改用 position: absolute（如答案中所示——该方案虽能视觉居中，但破坏了 flex 布局语义、牺牲可维护性，且在响应式场景下易失效），而是尊重 flex 布局逻辑，通过设置 min-height: 0 主动启用收缩能力：
.list-container {
display: flex;
flex-direction: column;
padding: 20px;
width: 50%;
height: 100%; /* 保持高度声明 */
min-height: 0; /* ? 关键：允许 flex 项收缩 */
}
.list {
flex: 1; /* ? 推荐替代 height: 100%：自动填充剩余空间 */
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
min-height: 0; /* ? 对于嵌套 flex 容器也建议添加 */
}同时，确保父级 .wrapper 的 height: 100% 生效，需保证其所有祖先（包括 html, body）均无默认 margin/padding 干扰，并显式设高：
html, body {
height: 100%;
margin: 0;
padding: 0;
}? 为什么 min-height: 0 有效？
它覆盖了 flex 项的默认 min-height: auto，告诉浏览器：“此元素可以缩小到 0，即使内容很多，也请优先触发 overflow 而非拉伸父容器”。
⚠️ 注意事项：
- 避免在 flex 容器内混用 height: 100% 与 flex: 1 —— 二者语义冲突，应优先使用 flex: 1 实现弹性填充；
- 若 .list 内部还有 flex 子项，同样需为其设置 min-height: 0，防止嵌套收缩失效；
- 在 Safari 等旧版浏览器中，可额外添加 -webkit-min-height: 0 提升兼容性；
- 绝对定位方案（如 position: absolute + transform）虽能绕过 flex 限制，但会脱离文档流，导致父容器无法感知其尺寸，不利于无障碍访问（a11y）与响应式断点控制，仅作为最后备选。
总结：解决 flex 子项溢出问题的核心，在于理解并显式控制其最小尺寸约束。min-height: 0 是最语义清晰、可维护性强、符合现代 CSS 最佳实践的标准解法。
