离子列表元素与div容器重叠

Question

我在Ionic 4中工作，我创建了一个列表并进行了填充。当我到达某个元素（在这种情况下为高度）时，我需要固定列表，以便可以向下滚动这些元素。但是当我尝试使用CSS时，元素在这种情况下与第二个div重叠。inputFood-container

代码：

localhost:5000

css类：

<div class="foodBank-container">
  <!-- List of Food Bank-->
  <div class="list">
    <ion-list *ngFor="let food of foodBank | async">
      <ion-item>
        {{food.name}}
      </ion-item>
    </ion-list>
  </div>
  <div class="inputFood-container">
    <ion-button color="warning" (click)="addFood(foodtemp)">
      <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
    <ion-input type="text" placeholder="Food Name" [(ngModel)]="foodtemp.name" class="name">
    </ion-input>
    <ion-select placeholder="Select Serving" [(ngModel)]="foodtemp.servingSize" interface="popover">
      <ion-select-option *ngFor="let amount of servings" [value]="amount">
        {{amount}}
      </ion-select-option>
    </ion-select>
    <ion-select placeholder="Select Type of Serving" [(ngModel)]="foodtemp.typeServing" interface="popover">
      <ion-select-option *ngFor="let type of typeServing" [value]="type">
        {{type}}
      </ion-select-option>
    </ion-select>
    <div class="macros">
      <ion-input placeholder="Proteins" [(ngModel)]="foodtemp.macro.proteins">
      </ion-input>
      <ion-input placeholder="Carbohydrates" [(ngModel)]="foodtemp.macro.carbs">
      </ion-input>
      <ion-input placeholder="Fats" [(ngModel)]="foodtemp.macro.fats">
      </ion-input>
      <ion-input placeholder="Calories" [(ngModel)]="foodtemp.macro.cals">
      </ion-input>
    </div>
  </div>
</div>