Html 每个div内的离子2滚动不滚动

我正在从事离子2项目，其中我有一个屏幕和两个独立的网格视图

第一个网格应该有40%的高度，因此在40%的高度内，整个网格应该滚动

我的第二个网格应该可以连续滚动而不指定高度。它应该根据内容的大小滚动。第二个网格与第一个网格不同。所以这里看起来是这样的：

 < ion-content >

<div>
first Grid view divs
</div>

<div>
Second Grid view divs
</div>

</ion-content>

第一个网格视图divs
第二个栅格视图divs

所以最初，我的

根本没有完全滚动。但当我给我的两个网格分区指定了一些特定的高度时，它们根本没有滚动。这是我的密码

我的完整代码：

<ion-content class="no-scroll" style="width: 100%;overflow-y: hidden;">

//First Grid code start here
<div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;height: 42%;">  
  <!--  // grid view code start below here -->
<div class="row no-padding"  *ngFor="let data of ResourceDetailData;let i = index">
     <ng-container *ngIf=" i % 2 === 0">

          <div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i].categoryname}}</span></div>
            </div>

            <div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i+1].categoryname}}</span></div>
             </div>
     </ng-container>


</div> 
</div> 

<!--  // First grid view code end here -->

// second grid code here

  <div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;">  
  <!--  // grid view code start below here -->
<div class="row no-padding"  *ngFor="let data of ResourceDetailData;let i = index">
     <ng-container *ngIf=" i % 2 === 0">

          <div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i].categoryname}}</span></div>
            </div>

            <div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i+1].categoryname}}</span></div>
             </div>
     </ng-container>


</div> 
</div>

// <!--  //second  grid view code end here -->

</ion-content >

//第一个网格代码从这里开始
{{ResourceDetailData[i].categoryname}
{{ResourceDetailData[i+1].categoryname}
//这里是第二个网格代码
{{ResourceDetailData[i].categoryname}
{{ResourceDetailData[i+1].categoryname}
// 

我不确定是否完全理解该场景，但您可以在第一个网格中使用。这样我们就可以使用40%的页面高度来表示它，其余的用于另一个网格

请看一看。结果是：

离子演示

太好了……我还有一个问题要问

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-scroll style="width:100%;height:40%;" scrollY="true">

    <!-- First grid -->

  </ion-scroll>

  <!-- Second grid -->

</ion-content>