Angular Material - IE 11 md卡布局溢出

Question

我在桌面设备中水平堆叠了三张md卡，并在小型设备中垂直堆叠（100％）。

<md-content class="cream" layout="row" layout-xs="column" layout-sm="column" >
                        <md-card flex="33" class="cream card-flex-auto" flex-sm="100" flex-xs="100" flex>
                            <md-card-content layout-padding class="cream">
                                <fieldset class="demo-fieldset">
                                    <h3 class="remove-top-margin"><span class="red">*</span>Region</h3>
                                    <div layout="row" layout-wrap flex>
                                        <div flex="100">
                                            <md-checkbox aria-label="Select All" ng-checked="isRegionChecked()" md-indeterminate="isRegionIndeterminate()" ng-click="toggleRegionAll()"> <span ng-if="isRegionChecked()">Un-</span>Select All </md-checkbox>
                                        </div>
                                        <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in region">
                                            <md-checkbox ng-checked="exists(item, regionSelected)" ng-click="toggle(item, regionSelected)"> {{ item }} </md-checkbox>
                                        </div>
                                    </div>
                                </fieldset>
                            </md-card-content>
                        </md-card>
                        <md-card flex="33" class="cream" flex-sm="100" flex-xs="100" flex>
                            <md-card-content layout-padding class="cream card-flex-auto" >
                                <fieldset class="demo-fieldset">
                                    <h3 class="remove-top-margin">Line of Business</h3>
                                    <div layout="row" layout-wrap flex>
                                        <div flex="100">
                                            <md-checkbox aria-label="Select All" ng-checked="isLobChecked()" md-indeterminate="isLobIndeterminate()" ng-click="toggleLobAll()"> <span ng-if="isLobChecked()">Un-</span>Select All </md-checkbox>
                                        </div>
                                        <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in lineofbusiness">
                                            <md-checkbox ng-checked="exists(item, lobSelected)" ng-click="toggle(item, lobSelected)"> {{ item }} </md-checkbox>
                                        </div>
                                    </div>
                                </fieldset>
                            </md-card-content>
                        </md-card>
                        <md-card flex="33" class="cream" flex-sm="100" flex-xs="100" flex>
                            <md-card-content layout-padding class="cream card-flex-auto">
                                <fieldset class="demo-fieldset">
                                    <h3 class="remove-top-margin">Segment</h3>
                                    <div layout="row" layout-wrap flex>
                                        <div flex="100">
                                            <md-checkbox aria-label="Select All" ng-checked="isSegmentChecked()" md-indeterminate="isSegmentIndeterminate()" ng-click="toggleSegmentAll()"> <span ng-if="isSegmentChecked()">Un-</span>Select All </md-checkbox>
                                        </div>
                                        <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in segment">
                                            <md-checkbox ng-checked="exists(item, segmentSelected)" ng-click="toggle(item, segmentSelected)"> {{ item }} </md-checkbox>
                                        </div>
                                    </div>
                                </fieldset>
                            </md-card-content>

在IE 11中，当重新调整浏览器大小时，md-card布局会溢出桌面中的父容器并相互溢出。

任何建议/见解都会非常有用。

Answer 1

md-card布局需要至少'min-height：1px;'它可以在IE 11中正常工作。