Stack on top of the each other the multiple selected items in Angular-Material?

Question

Here is a Codepen for the behavior that I have.

The multiple selected options are being stack one next to the other, but the problem with this is once the user select more and more options the options text overflow the text box of a form with a set width.

I need to find a way to stack the selected options on top of each other once the end of the text box is reach therefor keep all the options stack with in the form box.

 (function () { 'use strict'; angular .module('MyApp') .controller('AppCtrl', function($scope) { this.likedAnimals = ["mouse", "dog"]; this.animals = ["mouse", "dog", "cat", "bird", "LongAnnnnnnimal","LongerrrrrrrrrrrrText"]; }); })(); 

 <div> <md-input-container> <md-select multiple ng-model="ctrl.likedAnimals" placeholder="please select"> <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option> </md-select> </md-input-container> </div> 

Answer 1

I think you should specify width in px to set the the exact width of md-select rather than specifying width to md-option . See the below link.

http://codepen.io/next1/pen/xVLEpy

<md-input-container style="background-color:cyan">
<md-select flex style="background-color:yellow;width:200px" multiple ng-model="ctrl.likedAnimals" placeholder="please select"  >
  <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option>
</md-select>