horizontal scroll with ion-tabs icons

Question

I want to use ion-tabs to get scollable tabs. but the tabs are getting shrinked but not scrolling horizontally. Here is the code: toptabs, code

As it is a flex layout, i have tried using white-space:nowrap flex-wrap:nowrap

.tabbar{
    opacity:1;
    overflow-x:true;
    //width:auto;
}
.tab-button{
    flex:1 0 auto;
}
ion-tabs{
    overflow-x:scroll;
}

but nothing is working as expected. i want to make something like this

can someone help? this is not a duplicate. please look at the code. i need tabs. Please understand before marking.