如何在子级展开时展开嵌套CSS网格中的父级高度

我有一些嵌套CSS网格，其中子网格扩展超过父网格高度

我将代码删除到最低限度，这样我就可以看到是什么导致了这一问题，但我无法确定问题代码在哪里，也无法确定如何使父母的身高对孩子做出反应

我怀疑我的主要问题在这里的代码中，但是你可以在这里看到问题

---

理想情况下，父网格会随子网格一起展开，子网格不会溢出背景色。

问题是您使用百分比表示

网格行间距。如果不为父级
grid
wrapper设置特定高度，则此操作将不起作用。百分比（在本例中）取决于父对象的维度。因为如果不是，是什么的4%

？电网不会知道的

如果不想设置特定高度，可以使用

px

作为间隙

.grid容器{
背景色：#080808；
显示：网格；
网格模板区域：“站点卡片”“项目卡片”；
对正内容：空间均匀；
最大宽度：100%；
高度：自动；
}
#站点卡{
网格区域：站点卡；
显示：网格；
网格模板区域：“站点1”“站点2”“站点3”；
栅柱间隙：4%；
网格行间距：10px；
}
#地点1{
网格区域：站点1；
}
#站点2{
网格区域：站点2；
}
#地点3{
网格区域：站点3；
}
.卡片{
宽度：90px；
高度：90px；
背景色：红色；
最大宽度：100%；
}

.grid-container {
  background-color: #080808;
  display: grid;
  grid-template-areas:
  "site-card"
  "project-card";
  justify-content: space-evenly;
  max-width: 100%;
  height: 100%;
}

#site-card {
  grid-area: site-card;
  display: grid;
  grid-template-areas:
  "site1"
  "site2"
  "site3";
  grid-column-gap: 4%;
  grid-row-gap: 4%;
}