Angular Material Chips overflow x

<!DOCTYPE html>
<html ng-app="materialChips">

<head>
  <script src="https://code.angularjs.org/1.6.4/angular.js"></script>
  <script src="https://code.angularjs.org/1.6.4/angular-animate.js"></script>
  <script src="https://code.angularjs.org/1.6.4/angular-aria.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="ChipsController as vm">

  <h2>Angular Material Chips (Overflow X)</h2>
  <md-chips class="chips-new-line" ng-model="vm.data" placeholder="Enter an animal..."></md-chips>
</body>

</html>

angular.module('materialChips', ['ngMaterial']).
controller('ChipsController', function() {
  var vm = this;
  vm.data = [
    'Bear', 
    'Cat', 
    'Tiger', 
    'Lion', 
    'Dog', 
    'Turtle', 
    'Frog', 
    'Snake',
    'Cow',
    'Pig',
    'Chicken',
    'Deer'
  ];
});

/* Styles go here */
.md-chips {
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}

/* Remove  .md-chips .md-chip-input-container 
  if you want the placehoder in a new line*/
.md-chips md-chip, .md-chips .md-chip-input-container {
  display: inline-block !important;
  float: none !important;
}