CSS Grid设置overflow:scroll后出现行溢出问题求助

核心问题点 #

1. 尺寸计算错误：父容器宽度的calc(var(--boxW)-6vw)缺少空格，CSS的calc运算符前后必须加空格，否则表达式不生效，导致容器宽度异常。
2. 盒模型未统一：默认content-box下，父容器的height仅包含内容高度，额外的padding-block会让容器实际总高度超出设置值，网格轨道的1fr计算空间被挤压，引发溢出。
3. 无效属性使用：子元素的max-height:2fr完全无效，fr是网格轨道专用单位，不能用于元素的尺寸属性。
4. 属性重复覆盖：父容器先后设置两次gap，后一次会完全覆盖前一次，导致行列间距不符合预期。

修正后的完整代码 #

:root {
  --boxW: 80vw;
  --rowNumber: 30;
  --boxMargin: calc((100vw - var(--boxW)) / 2);
}

/* 全局统一盒模型，彻底避免padding/border撑开容器的问题 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.parent {
  background-color: #CC55AA;
  /* 固定容器总高度（包含padding），可根据需求改为auto实现自适应 */
  height: 100vh;
  width: var(--boxW);
  margin-inline: var(--boxMargin);
  margin-block: 10vh;
  padding-block: 7vh;
  padding-inline: 3vw;

  display: grid;
  /* 分开设置行列间距，避免属性覆盖 */
  row-gap: 3vh;
  column-gap: 2vw;

  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rowNumber), minmax(0, 1fr));
  /* 可选：若网格内容可能超出容器，添加overflow控制 */
  overflow: auto;
}

.child {
  background-color:#FCF0F7;
  /* 缩小padding，避免内容过度撑开网格轨道 */
  padding-inline: 2vw;
  padding-block: 2vh;
  /* 仅在内容溢出时显示滚动条 */
  overflow: auto;

  min-width: 0;
  min-height: 0;
}

.child1 {
  /* 简化网格定位写法 */
  grid-column: 1 / 6;
  grid-row: 1 / 2;
}

<body>
  <div class="parent">
    <div class="child child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.</div>
    <!-- 可添加更多子元素测试网格布局 -->
  </div>
</body>

关键修复说明 #

• box-sizing: border-box：这是解决尺寸溢出的核心，让容器的width和height包含padding与border，确保网格轨道的1fr计算基于容器的实际可用空间。
• 修正calc表达式：补全运算符前后的空格，保证宽度计算准确。
• 移除无效属性：删除max-height:2fr，改用合理的padding值控制子元素尺寸。
• 拆分gap属性：分别设置row-gap和column-gap，避免属性覆盖导致的间距混乱。
• 自适应/固定高度可选：若需要容器高度随网格内容自适应，将height:100vh改为height:auto即可，网格会自动分配等高度的行轨道。

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