角度材料柔性网格系统在 IE11 中不起作用答案

【问题标题】：Angular material flex grid system not working in IE11角度材料柔性网格系统在 IE11 中不起作用
【发布时间】：2018-01-23 11:53:48
【问题描述】：

我有一个使用 angularjs (1.5.5) 和 angular material (1.0.5) 构建的应用程序。

我通过有角度的材质使用了 flex 布局，但是当我缩放网页时，我在 IE11 上遇到了问题，flex 行相互溢出。

<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>

演示：https://codepen.io/anon/pen/wqPBLa?editors=1010

【问题讨论】：

您是否尝试过升级到 AM 1.1.4？
@MikeFeltman 我无法升级它，因为必须完成很多工作，应用程序太大，所以我正在寻找解决此问题的解决方法。
Angular Material 1.1.4 应该 100% 向后兼容。但是，我试过了，它似乎并没有解决问题。
@MikeFeltman 是的，感觉很糟糕，当涉及到 IE11 时，我总是遇到 flexbox 问题
我选择在我的大多数 Angular Material 应用程序上不支持 IE 11。不过，AM 在 Edge 上的效果要好得多。

标签： angularjs flexbox angular-material

【解决方案1】：

我用这种风格解决了这个问题：

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

【讨论】：