在 Flex 布局（flex-direction: column）中，让某个子元素占满剩余空间并启用滚动，关键在于打破 Flex 项默认的最小尺寸限制——只需为 .flex-grow 元素设置 min-height: 0（或 overflow: hidden），即可使 flex-grow: 1 正常生效。
在 flex 布局（`flex-direction: column`）中，让某个子元素占满剩余空间并启用滚动，关键在于打破 flex 项默认的最小尺寸限制——只需为 `.flex-grow` 元素设置 `min-height: 0`（或 `overflow: hidden`），即可使 `flex-grow: 1` 正常生效。
当使用 display: flex; flex-direction: column 构建垂直布局时，开发者常期望通过 flex-grow: 1 让中间区域自动填充容器剩余高度，并在其内容溢出时触发滚动条。但实际中，该子元素往往“拒绝收缩”，导致整体高度失控、滚动失效——根本原因在于：Flex 项默认具有 min-height: auto（即不小于其内容的固有高度），这会阻止 flex-grow 在空间受限时有效分配高度。
✅ 正确解法是显式重置这一约束：
.flex-grow {
flex-grow: 1;
align-self: stretch;
min-height: 0; /* ✅ 关键：允许 flex 项收缩至 0 高度，从而让 flex-grow 生效 */
/* 或者替代方案：overflow: hidden; （隐式触发 min-height: 0 行为） */
}
.scrollable {
overflow-y: auto; /* 推荐用 auto 而非 scroll，避免空滚动条 */
height: 100%;
}
? 为什么 min-height: 0 有效？
根据 CSS Flexbox 规范，min-height: auto 是 flex 项的初始值，它会将内容高度作为最小边界；设为 0 后，浏览器即可自由按 flex-grow 比例分配可用空间，不再被内容撑开。
完整 HTML 结构示例如下（适配任意数量兄弟元素）：
<div class="container">
<div class="child">Header / Fixed Content</div>
<div class="child flex-grow">
<div class="scrollable">
<!-- 大量动态内容 -->
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<!-- ...更多项 -->
<div class="child">Item N</div>
</div>
</div>
<div class="child">Footer / Fixed Content</div>
</div>
⚠️ 注意事项：
- 容器必须有明确高度（如 height: 300px 或 max-height），否则 flex-grow 无参考基准；
- 若 .flex-grow 内部有多个嵌套层，确保每一层未意外设置 min-height 或 height: fit-content 等限制性样式；
- 使用 overflow-y: auto 优于 scroll，可避免在内容不足时显示无效滚动条；
- 在现代浏览器中，min-height: 0 是最语义清晰、兼容性最佳（Chrome 21+, Firefox 20+, Safari 9+）的解决方案。
总结：无需复杂 calc() 计算，也不依赖父容器精确减去其他子项高度——只需一行 min-height: 0，即可让 Flex 子项真正“听话”地生长与收缩，是构建可伸缩 UI（如聊天窗口、侧边栏列表、控制台面板）的必备技巧。
