Ionic Grid is not scrollable in ionic2

Question

I've been facing this challenge now, my grid is not scrolling when the app is install on the phone, but I do scroll on the ionic lab on my system.
I was thinking it has to do with CSS, I've added a lot of styles, overflow : scroll and some tweaks but still behaving the same way, and I've also spend a whole lot of time getting this buddy smiling, but it still doesn't work.

This is my code.

<ion-navbar *navbar>
    <ion-toolbar>
        <ion-buttons start>
            <button (click)="NewPostPage()" primary>
            <ion-icon name="add" class="icon-color"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Posts</ion-title>
        <ion-buttons end>
            <button (click)="ProfilePage()" primary>
            <ion-icon name="person" class="icon-color"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons end>
            <button (click)="SettingPage()" primary>
            <ion-icon name="settings" class="icon-color"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-navbar>
<ion-content> 
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content primary></ion-refresher-content>
    </ion-refresher>
      <ion-grid style="overflow: scroll !important;">
        <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>        
      </ion-grid>
</ion-content>
<button *ngIf="fabCore1" fab fab-bottom fab-right (click)="Stylist()" class="fab-core-2" fab-core-color-1>
  <ion-icon name="radio-button-off"></ion-icon>
</button>
<button *ngIf="fabCore2" fab fab-bottom fab-right (click)="Chat()" class="fab-core-1" fab-core-color-2>
  <ion-icon name="chatboxes" style="margin-top: 4px;font-size: 22px;"></ion-icon>
</button>

<button fab fab-bottom fab-right (click)="ToggleHide()"  primary>
  <ion-icon name="more"></ion-icon>
</button>

Answer 1

maybe you should use <ion-col col-6>, not <ion-col width-50>? Maybe that causes a scroll problem.