Динамический размер мат-сетки-плитки

Question

введите описание изображения здесь

Я получаю эту странную вещь переполнения, когда я использую плитки mat-grid. Я пытаюсь получить размер, сколько текста находится в 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;
}