CSS Grid 100vh布局下侧边栏滚动单元格overflow失效如何解决

overflow: auto 不生效是CSS Grid的默认规则导致的：所有网格项的min-height、min-width默认值为auto，该规则会强制网格项尺寸不能小于内部内容的固有尺寸。你给侧边栏第三行设置的1fr高度，在列表内容过长时会被内容直接撑大，连带侧边栏、外层Grid容器超过预设的100vh高度，自然无法触发滚动。

只需要给需要滚动的#item-shouldscroll元素添加一行min-height: 0，覆盖默认的min-height: auto规则即可。修改后该元素会被严格约束在Grid分配的行高范围内，内容溢出时就会正常出现滚动条。

修正后的完整CSS代码如下：

body {
  margin: 0;
  padding: 0;
}

#dashboard {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
}

#content {
  background-color: #efefef;
}

#sidebar {
  background-color: #000;
  color: #fff;
  width: 200px;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

#item-shouldscroll {
  overflow: auto;
  min-height: 0; /* 核心修复属性 */
}

• 该方案完全适配异步加载列表的场景，无论列表项数量多少，外层Grid布局都会始终保持100vh高度，仅侧边栏滚动区域出现滚动条，不会影响上方两个固定尺寸的元素。
• 额外提醒：你的HTML中存在两个id为item-autosized的元素，id在单页面中需要保持唯一，建议改为类名选择器，避免后续样式或DOM操作出现异常。

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