Ionic Grid is not scrollable in ionic2 - ionic-framework

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.