动态调整尺寸的网格

Question

enter image description here

当我使用mat-grid-tiles时，我得到了这个奇怪的溢出物。我试图将大小调整为postContent中有多少文本。在图片中，前4个帖子很好，因为它们没有太多文字。图片中的最后一个帖子是问题。

<mat-card class="main" >
<mat-card-content *ngFor="let posts of posts">
  <mat-grid-list cols="6" rowHeight="3:1">
    <mat-grid-tile colspan="1" rowspan="2">
      <img class="responsive" src="http://localhost/api/assets/{{posts.profilePicture}}">
    </mat-grid-tile>
    <mat-grid-tile colspan="5" rowspan="3">
      <div class="text-in-tile">
        <p class="content">{{posts.postContent}}</p>
      </div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <div>
        <p class="username">{{posts.name}}</p>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</mat-card-content>

这是我用于主类的代码

.main-div {
  justify-content: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
}