how to make an ionic list scrollable that the content height is variable?

Question

enter image description here FOTOOO

i want to make an ionic list scrollable but not all the content because ionic it do it directly.I want the scroll but after a content that is fixed. Now it appears the scroll but all the page. and I want the first content fixed and the second scrollable. A possible solution put a div.

<div scrolly="true" style="max-height:100px">
    <!--content to scroll whose height exceeds 100px-->
</div>

The problem here is that if i put 400px of height for some devices will be wrong because each device is diferent, and now i can put the exact height but when the people try it in their phones won't see well. Here is the html code if you need it and the photo to see it.

[<ion-header \[translucent\]="true">
    <ion-toolbar>
      <ion-title>My profile</ion-title>
      <ion-buttons slot="end">
        <ion-menu-button autoHide="true" menu="first"></ion-menu-button>
      </ion-buttons>

    </ion-toolbar>
  </ion-header>

  <ion-router-outlet id="main"></ion-router-outlet>
  
  <ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <ion-item *ngIf="usuario">
      <ion-avatar>
        <img \[src\]="avatar" />
      </ion-avatar>
  
      <ion-label class="m-r-6">
        <h3>{{ usuario.username }}</h3>
        <p class="f-12">{{ usuario.email }}</p>
      </ion-label>

      <ion-label slot="end">
        <h1 class="green">{{usuario.averagePercentError}}%</h1>
      </ion-label>
    </ion-item>
    <ion-fab
      vertical="bottom"
      size="10"
      color="tertiary"
      horizontal="end"
      slot="fixed"
    >
      <ion-fab-button (click)="predict()">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>


  
    <div *ngIf="showPredictions === 'inactives'">
     <ion-list *ngIf="myInactivePredictions">

        <ion-item *ngFor="let prediction of myInactivePredictions">
          <ion-img \[src\]="prediction.image" class="a"></ion-img>
          <ion-label>
            <h3>
              {{ prediction.symbol | uppercase }}
              <label
                \[ngClass\]="{'green': prediction.realValue > 0, 'red': 0 > prediction.realValue }"
                >{{ prediction.realValue }}%</label
              >
            </h3>
  
            <p class="f-12">{{ prediction.name }}</p>
          </ion-label>
  

        </ion-item>
      </ion-list>

    </div>
  </ion-content>][1]