Angular-material limit width in md-select multiple - css

Question

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

Answer 1

The issues appears to be do to a conflict between bootstrap's input-group which uses table styling and Angular Material which does not. I would recommend using md-input-container instead.
/* global angular */
angular.module('app', ['ngMaterial']);
angular.module('app').controller('MainCtrl', function($scope) {
$scope.fruits = [
'apple',
'banana',
'orange',
'mango',
'kiwi',
'pineapple',
'lemon',
'blueberry',
'strawberry'
];
});
/* custom css */
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
<!- html pages -!>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-aria.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app" ng-controller="MainCtrl as mainCtrl">
<div class="col-xs-4">
<md-input-container class="md-block" flex-gt-xs>
<md-select class="form-control no-padding" ng-model="t" aria-label="t" multiple>
<md-option ng-value="opt" ng-repeat="opt in fruits">{{opt}}</md-option>
</md-select>
<md-icon><i class="glyphicon glyphicon-remove"></i></md-icon>
</md-input-container>
</div>
<div class="col-xs-4">
<md-input-container class="md-block" flex-gt-xs>
<input type="text" class="form-control" aria-label="test input">
</md-input-container>
</div>
</div>