Html 为什么 CSS 网格超出了父级

我在一个Angular 15的组件使用css网格.当网格有一行时，网格底部与‘服务部分’底部相同.当我有多行时，网格会延伸到"服务部分"的底部之外.此外，对于每一行，底部延伸都会增长一点.

将overflow设置为AUTO会将滚动条添加到div.将OVERFLOW设置为隐藏、截断 最后一排.这两种情况都不是我们所希望的.高度、最小高度100%、自动等也不行.

如何让栅格容器正常运行？ https://jsfiddle.net/eflat123/vq08u7gb/7/个

  <div class="grid" style="min-height: fit-content;">
    <mat-card class="card">
      <mat-card-content><p>My Service 1</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 2</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 3</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 4</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 5</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 6</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 7</p><p>1 hour</p></mat-card-content>
    </mat-card>
  </div>
</div>

<style>
  .services-section {
    border: 1px solid blue;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1.5em;
    grid-row-gap: 7%;
    grid-column-gap: 5%;
  }
</style>