CSS Grid布局下SVG区域水平与垂直滚动行为不一致问题

问题描述 #

使用CSS Grid布局构建页面，为承载SVG的.svg容器设置了overflow-x: auto和overflow-y: auto，预期屏幕尺寸缩小时，该容器会同时出现水平和垂直滚动条，但实际仅水平滚动条正常显示，垂直滚动条始终不出现。

原因分析 #

核心问题出在Grid容器的行高设置上：
你的.container中grid-template-rows: 30px auto 30px，中间行使用了auto值，这会让该行高度完全自适应内部内容的高度。也就是说，.svg容器的高度会被里面的内容（比如多个<h1>）撑开，永远不会出现内容高度超出容器高度的情况，自然不会触发垂直滚动条。而水平方向的grid-template-columns: 150px auto中，auto列宽会受容器整体宽度限制，当内容宽度超出列宽时，就会触发水平滚动条。

解决方案 #

需要限制.svg容器的高度，让内容超出时能触发垂直滚动。推荐两种灵活的实现方式：

方案一：让Grid容器占满视口，中间行分配剩余空间 #

这种方式适配不同屏幕尺寸，布局更灵活：

.header {
  grid-area: header;
  font-family: Arial, sans-serif;
  justify-self: center;
  align-self: center;
}

.container {
  display: grid;
  grid-template-columns: 150px auto;
  /* 中间行用1fr占据容器剩余高度，替换原来的auto */
  grid-template-rows: 30px 1fr 30px;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-areas: "header header" "hmiTree svg" "footer footer";
  /* 让Grid容器占满整个视口高度 */
  height: 100vh;
  /* 避免内边距/边框撑大容器 */
  box-sizing: border-box;
  /* 可选：添加内边距，避免内容贴屏幕边缘 */
  padding: 10px;
}

.hmiTree {
  grid-area: hmiTree;
}

.svg {
  grid-area: svg;
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px;
}

.footer {
  grid-area: footer;
  font-family: Arial, sans-serif;
  align-self: center;
}

方案二：直接给.svg容器设置固定/最大高度 #

如果需要固定容器高度，可以直接设置：

.svg {
  grid-area: svg;
  overflow-x: auto;
  overflow-y: auto;
  /* 设置固定高度，根据需求调整 */
  height: 400px;
  /* 或者设置最大高度，超出后滚动 */
  /* max-height: 500px; */
}

效果验证 #

修改后，当.svg容器内的内容高度超出容器高度时，垂直滚动条会自动出现；水平方向在内容超出容器宽度时，滚动条也会正常显示，符合预期。

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