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

我在爱奥尼亚4号工作，我已经创建了一个列表并进行了填充。当我到达某个元素时，在本例中是一个高度，我需要固定列表，以便可以向下滚动元素。但是当我尝试css中的内容时，在本例中，元素与我的第二个div重叠

代码：

<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>

.foodBank-container{
    max-width: 20vw;
    max-height: 100vh;
    .list{
        max-height: 25vh;
    ion-list{
        ion-item{
            font-size: 0.9vw;
        }
    }
}
    .inputFood-container{
        margin-left: 1vw;
        ion-input.name{
            display: inline-block;
            max-width: 15vw;
        }
        ion-select{
            display: inline-block;
            font-size: 0.65vw;
        }
        .macros{
            ion-input{
                display: inline-block;
                max-width: 8vw;
            }
        }
    }
}