scrollable segments in ionic 2 (horizontal)

Question

I am trying to do horizontal scroll using segments in ionic2. Here is the code:

home.ts:

<ion-scroll scrollX="true" style="width:100vw;height:350px" >
<ion-segment [(ngModel)]="relationship" color="primary">


      <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
        Friends
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
       <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>

    </ion-segment>
      </ion-scroll>

According to this document, I used the ion-scroll outside the ion-segment, so I am getting the UI like this.

How can I make my name visible depending upon the length of the name and show only 3 to 4 names. After the user scroll, it should show the next names one by one.

Answer 1

ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        display: inline-block;
        min-width: 100px;
        width: auto;
    }
}

works fine

Answer 2

this solution is for Ionic2, so the solution was working only for Ionic2

ion-segment {
    justify-content: space-between;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        flex: 1 0 100px;
    }
}

this is if you want fixed width tabs, if you want various width you should switch from flex to block/inline-block

ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        display: inline-block;
        min-width: 100px;
        width: auto;
    }
}

here is for various width tabs

as mentioned in the solution by Suraj find github discussion link here