title: Angular-material limit width in md-select multiple
body: <p>I have an md-select that after selecting multiple items, the width does not respect the 100% width limit. Here's an example:</p>
  
  <p>Problem: <a href="https://i.stack.imgur.com/lqeFG.png" rel="nofollow noreferrer">problem image</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* global angular */
  angular.module('app', ['ngMaterial']);
  
      angular.module('app').controller('MainCtrl', function ($scope) {
          
          $scope.fruits = [
              'apple',
              'banana',
              'orange',
              'mango',
              'kiwi',
              'pineapple',
              'lemon',
              'blueberry',
              'strawberry'];
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* custom css */
      .no-padding {
          padding: 0 !important;
          margin: 0 !important;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!- html pages -!&gt;
  &lt;script src="https://code.angularjs.org/1.5.9/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/1.5.9/angular-aria.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/1.5.9/angular-animate.js"&gt;&lt;/script&gt;&lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  
      &lt;div ng-app="app" ng-controller="MainCtrl as mainCtrl"&gt;
  
        &lt;div class="col-xs-4"&gt;
          &lt;div class="input-group"&gt;
          &lt;md-select class="form-control no-padding" ng-model="t" aria-label="t" multiple&gt;
            &lt;md-option ng-value="opt" ng-repeat="opt in fruits"&gt;{{opt}}&lt;/md-option&gt;
          &lt;/md-select&gt;
  
          &lt;a class="input-group-addon btn btn-md"&gt;
             &lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;
           &lt;/a&gt;
           
          &lt;/div&gt;
         &lt;/div&gt;
       
         &lt;div class="col-xs-4"&gt; 
          &lt;input type="text" class="form-control"&gt;
         &lt;/div&gt;
         
       &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem only occurs when the user selects 'md-select' items, see the example above.</p>