[4.0.0-beta.17] ion-segment-button edges out when button number > 4

Bug Report

Ionic version:

[x] 4.x

Current behavior:

ion-segment-buttons edges out on both side of tool bar when you have more than 4 ion-segment-buttons. this dose not happen on 4.0.0-beta15 Expected behavior:

all the ion-segment-buttons should be displayed in the toolbar Steps to reproduce:

initiate an Ionic project with the starter

ionic start myApp tabs --type=angular

copy paste the following code snippts under ion-header sector of the home page Related code:

<ion-toolbar>
    <ion-segment [(ngModel)]="order" color="light">
      <ion-segment-button value="receive" >
        <ion-label>Receive</ion-label>
      </ion-segment-button>
      <ion-segment-button value="publish" >
        <ion-label>Publish</ion-label>
      </ion-segment-button>
      <ion-segment-button value="topic" >
        <ion-label>Topic</ion-label>
      </ion-segment-button>
      <ion-segment-button value="query" >
        <ion-label>Query</ion-label>
      </ion-segment-button>
      <ion-segment-button value="read" >
        <ion-label>Read</ion-label>
      </ion-segment-button>
      <ion-segment-button value="trash" >
        <ion-label>Trash</ion-label>
      </ion-segment-button>
    </ion-segment>
</ion-toolbar>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/home/wjz/.nvm/versions/node/v10.7.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-webview 2.0.2, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/wjz/Android/Sdk)
   NodeJS            : v10.7.0 (/home/wjz/.nvm/versions/node/v10.7.0/bin/node)
   npm               : 6.2.0
   OS                : Linux 4.15

Environment:

   HTTP_PROXY  : http://127.0.0.1:37245/
   http_proxy  : http://127.0.0.1:37245/
   HTTPS_PROXY : http://127.0.0.1:37245/
   https_proxy : http://127.0.0.1:37245/

[jing-zhou]

Thanks, the CSS works fine for me

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.