ионная сетка - текстовый формат

Question

Я хотел бы поместить некоторый текст в поле ионной сетки, и я не понимаю, почему текст переходит через поле и выходит за пределы ионной сетки. Я хочу сделать его отзывчивым , поэтому я не хочу использовать height: 100px (как пример). Я знаю, что это будет работать, если я установлю абзац с высотой: 100 пикселей, с переполнением: авто, он обрежет текст, как я хочу, и я могу перемещать его с помощью прокрутки.

Это то, что я хочу, для дизайна.

Вот так это выглядит, когда я добавляю текст.

есть код CSS-файл

ion-content {
    display: flex;
    height: 100vh;
    width: 100vw;
}

ion-grid {
    display: flex;
    flex-direction: column;
    height: 91%;
    width: 100%;
}

HTML-файл

<ion-content *ngIf="infoData && infoData.length > 0">
  <ion-grid>
    <ion-row>
        <ion-col>
          <h5>Row 1 Col 1</h5>
          <img src="{{infoData[0].img1}}">
        </ion-col>
        <ion-col>
          <h5>Row 1 Col 2</h5>
          <p>{{infoData[0].description}}</p>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
          <h5>Row 2 Col 1</h5>
          <img src="{{infoData[0].img2}}">
        </ion-col>
        <ion-col>
          <h5>Row 2 Col 2</h5>
          <img src="{{infoData[0].img3}}">
        </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>