Localised ionic list scrolling

Ionic Framework
1

Hello,

I have a long ion-list inside an ion-card, and to fully-display it, some scrolling is needed. How do I make the scrolling happen inside the card alone i.e. all other parts of the UI remain immobile during scrolling?

The following code illustrates my problem.

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>My App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card>
      <ion-card-header>
        <ion-card-title>Card 1</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        Card 1 Content
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        <ion-card-title>Card 2</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list-header>Chips Group 1</ion-list-header>
        <p>
          <ion-chip color="light">
            <ion-label>Chip 1.1</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-icon name="checkmark-circle"></ion-icon>
            <ion-label>Chip 1.2</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-label>Chip 1.3</ion-label>
          </ion-chip>
        </p>
        <ion-list-header>Chips Group 2</ion-list-header>
        <p>
          <ion-chip color="light">
            <ion-label>Chip 2.1</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-icon name="checkmark-circle"></ion-icon>
            <ion-label>Chip 2.2</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-label>Chip 2.3</ion-label>
          </ion-chip>
        </p>
        <ion-list-header>Chips Group 3</ion-list-header>
        <p>
          <ion-chip color="light">
            <ion-label>Chip 3.1</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-icon name="checkmark-circle"></ion-icon>
            <ion-label>Chip 3.2</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-label>Chip 3.3</ion-label>
          </ion-chip>
        </p>
        <ion-list-header>Chips Group 4</ion-list-header>
        <p>
          <ion-chip color="light">
            <ion-label>Chip 4.1</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-icon name="checkmark-circle"></ion-icon>
            <ion-label>Chip 4.2</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-label>Chip 4.3</ion-label>
          </ion-chip>
        </p>
        <ion-list-header>Chips Group 5</ion-list-header>
        <p>
          <ion-chip color="light">
            <ion-label>Chip 5.1</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-icon name="checkmark-circle"></ion-icon>
            <ion-label>Chip 5.2</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-label>Chip 5.3</ion-label>
          </ion-chip>
        </p>
        <ion-list-header>Chips Group 6</ion-list-header>
        <p>
          <ion-chip color="light">
            <ion-label>Chip 6.1</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-icon name="checkmark-circle"></ion-icon>
            <ion-label>Chip 6.2</ion-label>
          </ion-chip>
          <ion-chip>
            <ion-label>Chip 6.3</ion-label>
          </ion-chip>
        </p>
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-app>

If I swipe down, the whole UI gets swiped. I want the card Card 1 to remain fixed while the list items are scrolled inside Card 2.

I am super new to web development, and I could not achieve the desired result by wrapping the cards inside HTML <div>s.

Thanks,
Amine.