如何防止CSS Grid列超出网格容器的最大高度？

这里是一个基于CSS Grid的固定比例双列布局，左侧占27份宽度，右侧占78份，同时支持内容溢出时滚动，整体高度适配视口。

完整代码实现 #

HTML代码 #

<div id="container">
  <div id="left" class="box">
    <!-- 左侧内容区域 -->
    <p>左侧栏内容</p>
    <p>可以添加更多内容测试滚动</p>
    <!-- 重复内容用于测试滚动效果 -->
    <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
  </div>
  <div id="right" class="box">
    <!-- 右侧内容区域 -->
    <p>右侧栏内容</p>
    <p>同样可以添加更多内容测试滚动</p>
    <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
  </div>
</div>

CSS代码 #

body { 
  overflow: hidden; 
  padding: 0; 
  margin: 0; 
  background-color: #222525; 
  color: white; 
}
#container { 
  display: grid; 
  grid-template-columns: 27fr 78fr; 
  max-height: 100vh; 
}
#left { 
  grid-row: 1; 
  grid-column: 1; 
}
#right { 
  grid-row: 1; 
  grid-column: 2; 
  max-height: 100%; 
}
.box { 
  margin: 8px; 
  padding: 8px; 
  border-radius: 10px; 
  border: blue solid 2px; 
  overflow-y: auto; 
  max-height: 100%; 
}

关键布局要点解析 #

• Grid列比例控制：通过grid-template-columns: 27fr 78fr实现左侧27份、右侧78份的宽度比例，fr单位会自动分配可用空间。
• 视口高度适配：#container设置max-height: 100vh，确保布局不会超出浏览器视口高度。
• 内容滚动处理：.box类添加overflow-y: auto和max-height: 100%，当内容超出容器高度时自动显示垂直滚动条。
• 全局样式重置：body设置margin: 0; padding: 0; overflow: hidden，消除默认边距并防止页面整体滚动。

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