How to disable ion-content scroll but certain components scrollable?

Ionic Framework Ionic Angular
1

Hello… I am trying to make my ion-content not scrollable, and I did it by doing this on my CSS file:

ion-content {
 --overflow: hidden;
}

but then, I tried to make the lines of an ion-grid scrollable and I can’t do it, I did it this way:

.content-grid {
  overflow-y: scroll !important;
}

Could you guys please tell me what am I doing wrong?

Thank you for your attention

2

I’m not a big fan of Ionic’s grid, so I can’t speak directly to it. I think you need to specify some sort of height on your scrollable area; take a look at the following and see if you can adapt it to your situation:

<ion-app>
<ion-content scroll-y="false">
  <div>i am fixed above</div>
  <div class="grid">
    <div class="cell" *ngFor="let fruit of fruits">
      <div>{{fruit}}</div>
    </div>
   </div>
  <div>i am fixed below</div>
</ion-content>
</ion-app>

export class AppComponent {
  fruits = ["apple", "banana", "cherry", "dragonfruit", "elderberry", "fig", "grape"]
}

.grid {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 90vh;

  .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 200px;
    border: 2px dashed blue;
    margin: 6px;
  }
}