Angular material flex grid system not working in IE11

Question

I have an application built with angularjs (1.5.5) and angular material (1.0.5).

I used the flex layout by the angular material, but I'm having an issue on IE11 when I zoom the webpage, the flex rows are getting overflowed on each other.

<div ng-cloak ng-app="MyApp">
    <div layout="row" layout-sm="column" layout-md="column">
        <div flex>
            <md-datepicker flex ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
        </div>
        <div flex>
            <md-datepicker flex ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
        </div>
    </div>
    <div layout="row" layout-sm="column" layout-md="column">
        <md-input-container class="md-block" flex>
            <label>Text</label>
            <input ng-model="text">
        </md-input-container>
    </div>
    <div layout="row" layout-sm="column" layout-md="column">
            <md-input-container class="md-block" flex>
                <label>Text 1</label>
                <input ng-model="text">
            </md-input-container>
            <md-input-container class="md-block" flex>
                <label>Text 2</label>
                <input ng-model="text">
            </md-input-container>
            <md-input-container class="md-block" flex>
                <label>Text 3</label>
                <input ng-model="text">
            </md-input-container>
    </div>
</div>

DEMO : https://codepen.io/anon/pen/wqPBLa?editors=1010

Answer 1

I fixed this using this style :

 .layout-row > .flex {
  -ms-flex-basis: auto;
  flex-basis: auto;
}
 .layout-column > .flex {
  -ms-flex-basis: auto;
  flex-basis: auto;
}