Handle swipe gestures on top of each other

I have a modal component with this content inside. The main problem is that when I try to scroll the text inside the “description” div the gesture on the modal gets activated and the modal goes up and down on the screen. Is there a way to isolate these two scroll gestures. ?

<ion-content scrollY="false">
  <ion-card-header>
    <ion-card-subtitle>Subtitle</ion-card-subtitle>
    <ion-card-title>Title</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <ion-segment style="margin-bottom: 0.5em;" [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="description">
        <ion-label>Descrizione</ion-label>
      </ion-segment-button>
      <ion-segment-button value="info">
        <ion-label>Info</ion-label>
      </ion-segment-button>
    </ion-segment>
<div [ngSwitch]="segment">
    <div style="border: solid 2px red; overflow: scroll;" scrollY="true" *ngSwitchCase="'description'">
      text ....
    </div>

    <ion-list *ngSwitchCase="'info'">
        <ion-item>
          <ion-text>www.example.com</ion-text>
        </ion-item>
    </ion-list>
  </div>
</ion-card-content>
</ion-content>