当容器设置 overflow-y: scroll 时，Flex 子项默认被约束在容器高度内；通过将容器改为 display: grid 并配合 grid-auto-rows: min-content，可使内容（如侧边栏）按实际高度渲染，同时保持主区域滚动能力。
当容器设置 `overflow-y: scroll` 时，flex 子项默认被约束在容器高度内；通过将容器改为 `display: grid` 并配合 `grid-auto-rows: min-content`，可使内容（如侧边栏）按实际高度渲染，同时保持主区域滚动能力。
在现代 CSS 布局中，flex 的 align-items: stretch 在 overflow 容器中常失效——因为 Flex 容器会将子项高度强制截断为自身可滚动区域的高度，而非其真实内容高度。要让 .sidebar 等元素“突破” .bottom 的滚动边界并按真实内容（如多个 300px 高的 .sidebar-item）自然撑高，关键在于解耦布局逻辑与尺寸约束。
推荐方案是将 .bottom 从 flex 改为 grid，并采用以下核心策略：
- display: grid 替代 flex，避免 Flex 的隐式高度约束；
- grid-auto-flow: column 实现水平并排布局（类似 flex-direction: row）；
- grid-template-columns: auto 显式保留侧边栏宽度（100px），不随内容缩放；
- grid-auto-columns: 1fr 让 .main 区域自动占据剩余空间；
- 最关键的是 grid-auto-rows: min-content：它确保网格行高由内容最高子项（即 .sidebar）决定，而非容器自身高度，从而允许 .sidebar 自由延伸，而 .main 仍保留在可滚动区域内。
以下是优化后的完整代码示例：
.bottom {
flex: 1;
display: grid;
overflow-y: scroll;
grid-auto-flow: column;
grid-template-columns: auto; /* 固定 sidebar 宽度 */
grid-auto-columns: 1fr; /* main 自适应剩余宽度 */
grid-auto-rows: min-content; /* 行高由 tallest child 决定 */
}
⚠️ 注意事项：
- min-content 依赖于子元素的真实尺寸（如 .sidebar-item 的 height: 300px），若侧边栏内容动态变化，需确保其内部高度可被正确计算；
- 若 .main 中也需垂直方向弹性伸展，可在其内部继续使用 display: flex; flex-direction: column; flex: 1；
- 不建议对 .sidebar 设置 height: 100% 或 min-height: 100%，这会再次引入父容器高度依赖，破坏 min-content 效果；
- 兼容性方面，grid-auto-rows: min-content 在所有主流浏览器（Chrome 66+、Firefox 62+、Safari 16.4+）中均支持，旧版 Safari 可降级为 grid-auto-rows: auto + 显式 min-height 作为兜底。
总结：Flex 在滚动容器中难以实现“部分子项撑高、部分子项滚动”的混合行为，而 Grid 提供了更细粒度的行列控制能力。用 grid-auto-rows: min-content 替代 flex: 1 是解决此类“突破溢出限制”问题的优雅方案——既保持布局语义清晰，又无需 JavaScript 计算高度。
