List 如何在ionic中停止列滚动

我在一个屏幕上工作，屏幕上有两列，一列选择类别，另一列根据类别显示项目，基本上是一个过滤选项屏幕。我有两列，category列有3个选项cat 1、cat 2和cat 3，另一列上的列表更大，可以滚动，不同的类别有不同的列表。但我不能这么做。当我在这个屏幕上滚动时，整个屏幕也在滚动类别列。我想停止类别列滚动，项目列可以滚动。怎么做？我的代码在下面

<ion-content>

    <ion-row>
  <ion-col >

    <ion-item>
      cat1
    </ion-item>
    <ion-item>
      cat2
    </ion-item>
    <ion-item>
      cat3
    </ion-item>
  </ion-col>

  <ion-col class="home-container">

      <ion-list>
          <ion-item padding text-wrap *ngFor="let d of data">
              <ion-label>
                   {{ d.title }} 
              </ion-label>
              <ion-checkbox color="royal" checked="false"></ion-checkbox>
          </ion-item>
      </ion-list>

  </ion-col>
</ion-row>

</ion-content> 

---

你需要一个固定的高度

部分{
背景：红色；
填充：15px；
显示：内联块；
宽度：100%；
身高：100%；
}
.cat_1、.cat_2{
浮动：左；
填充：20px；
}
.cat_1{背景：银色；}
.第2类{
背景：白色；
高度：300px；
溢出：自动；
}

项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3
项目1
项目2
项目3

您的项目列需要有一个高度，并且

溢出：auto

才能实现this@sTx不工作。。请看我更新了问题。请尝试此@TusharKotecha，感谢它现在正在工作。如何根据设备屏幕大小提供高度？

page-teacher-filter {
    .home-container {
        overflow:auto;
        height: 100%;
   }
}