材质网格通过滚动填充整个屏幕

Question

我创建了一个已启动的 Angular Material 项目。在app.component，我有一个工具栏和一个路由器插座。在 home 组件中，我有一个包含两列的网格列表。这两列通过滚动填充整个空间。我不想要滚动。如何在不滚动的情况下填充可用空间。

代码：

app.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Va Ranjith Dashboard</span>
  </mat-toolbar-row>
</mat-toolbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

home.component.html

<div class="home-container">
  <mat-grid-list cols="2" rowHeight="fit">
    <mat-grid-tile>1</mat-grid-tile>
    <mat-grid-tile>2</mat-grid-tile>
  </mat-grid-list>
</div>

截图：

我没有在该网格列表中添加任何样式，但我得到了滚动条。如何摆脱它。我可以将overflow 用作隐藏，但如果我有内容，它肯定会超出此范围。请指教。

Answer 1

我偶然发现了类似的问题。
就我而言，有必要使用以下 css 样式：

mat-grid-list, mat-grid-tile {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}