Tab nav bar not staying on one line when it overflows

[mdelorimier]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When the tabs inside a mat-tab-nav-bar overflows, we should se arrows on both sides to be able to "scroll"

What is the current behavior?

The tabs fall on multiple lines

What are the steps to reproduce?

https://stackblitz.com/edit/angular-eebng6 (Resizing the windows might be necessary depending on your screen size)

What is the use-case or motivation for changing an existing behavior?

Having multiple tabs in a tab-nav-bar

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

  "dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/cdk": "^5.1.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/material": "^5.1.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/router": "^5.1.1",
    "chart.js": "^2.7.1",
    "chartjs-plugin-annotations": "^0.6.1",
    "chartjs-plugin-datalabels": "^0.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.4"
  },

Is there anything else we should know?

Might be related to #8871

[WandersonAlves]

Same problem 😞

[andrewseguin]

Dupe of #2177

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}