CSS侧边栏布局：限制Aside高度并实现滚动

一、修复aside高度溢出并添加滚动的最简方案 #

你的问题核心是没给aside容器设置溢出控制，反而把overflow-y: scroll加到了单个tree-item上，完全搞反了逻辑。只需要修改两处代码：

1. 给aside添加溢出控制，让内容超出时自动滚动：

aside {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: aquamarine;
  overflow-y: auto; /* 新增这一行 */
}

2. 移除tree-item上多余的滚动设置：

.tree-item {
  padding: 1rem;
  background-color: blueviolet;
  margin-bottom: 0.125rem;
  text-align: center;
  /* overflow-y: scroll; 删掉这一行 */
}

原理：你的Grid布局已经通过grid-template-rows: 4rem 1fr 3rem给中间行（aside和main所在行）分配了固定可用高度（1fr = 视口高度 - 导航4rem - footer3rem）。给aside加上overflow-y: auto后，当内部内容高度超过Grid分配的高度时，会自动出现垂直滚动条，同时aside高度会严格和main保持一致。

二、CSS Grid是否是合适的方案？ #

非常合适。这种「顶部导航+侧边栏+主内容+底部footer」的经典布局，正是CSS Grid的强项：

• 代码简洁直观，只用一层Grid容器就能完成二维布局，不需要嵌套复杂结构
• 行列分配清晰，通过fr单位可轻松实现弹性空间分配
• 元素位置控制精准，无需依赖margin/padding调整布局

有没有更优替代方案？ #

如果非要找替代，Flexbox也能实现，但需要嵌套两层Flex结构：

1. 外层容器设为flex-direction: column，控制导航、中间内容区、footer的垂直布局
2. 中间内容区再设为display: flex，控制aside和main的水平布局

这种方案代码更繁琐，还需要额外处理中间内容区的高度计算，远不如Grid用1fr省心。所以Grid是当前场景下的最优选择。

内容的提问来源于stack exchange，提问作者user3624383