CSS设置aside元素overflow-y滚动无效 隐藏选项滚动访问方法

核心需求：避免选项溢出aside容器，超出部分收纳在容器内部，通过纵向滚动条访问。

现有代码 #

aside {
    background-color: #E63946;
    height: 100%;
    width: 100%;
    grid-column: 1;
    grid-row: 2/5;
    display: grid;
    place-items: center;
    grid-template-rows: repeat(5,1fr);
}

已尝试添加overflow-y: scroll;属性，未达到预期效果，当前实际渲染效果：

修复方案 #

失效原因 #

滚动规则不触发由两处配置冲突导致：

• 写死grid-template-rows: repeat(5,1fr)后，网格容器固定按5行等高分栏，会随内容总高度自动撑开，无法识别内容溢出状态
• Grid布局元素默认值为min-height: auto，该规则下容器最小高度等于内部内容总高度，即使设置了明确height值也会被内容撑大，溢出属性自然不生效

可直接复用的修复后代码 #

aside {
    background-color: #E63946;
    height: 100%;
    width: 100%;
    grid-column: 1;
    grid-row: 2/5;
    display: grid;
    place-items: center;
    /* 移除原固定行高分配配置 grid-template-rows: repeat(5,1fr); */
    min-height: 0; /* 核心配置：覆盖Grid默认min-height规则，允许容器高度被父级限制 */
    overflow-y: auto; /* 内容溢出时显示纵向滚动条，无溢出时不显示冗余滚动条 */
    gap: 16px; /* 按需调整内部选项的垂直间距，替代原fr行实现的间距效果 */
    padding: 20px 0; /* 按需设置容器上下内边距，避免首尾选项贴边 */
}

如果内部选项需要统一宽度，直接给aside的子元素单独设置宽度属性即可，不要通过网格行模板限制容器高度分配逻辑。

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