IE 中的嵌套 <div>（带 flex 框）未填满父元素的全高

Question

我有一些 <div> 嵌套在一个固定高度的容器中，我希望子元素填充父元素的整个高度。这在 Chrome 中效果很好，但在 IE 中失败（Windows 8 上的 11）。

(左： IE 右： Chrome)

我正在使用 Angular Material，所以我想尽可能坚持他们的布局 CSS 样式。

示例： CODEPEN

HTML:

<div style="height: 150px;width: 100%">
  <div style="background:#F00;border: 1px solid black;"
       layout-fill
       layout>
    <div style="background:#CCC"
         layout-fill>
      Test
    </div>
  </div>
</div>

<div style="height: 150px;width: 100%">
  <div style="background:#F00;border: 1px solid black;"
       layout-fill
       layout>
    <div style="background:#CCC"
         flex>
      Test
    </div>
  </div>
</div>

CSS:（示例中存在供应商前缀）

[flex] {
  box-sizing: border-box;
  flex: 1;
}

[layout] {
  box-sizing: border-box;
  display: flex;
}

[layout-fill] {
  margin: 0;
  min-height: 100%;
  width: 100%;
}

有没有人也遇到过这种问题，知道我该如何解决？

Answer 1

如果您同时使用 angular 和 angular-material，您可以考虑使用 layout="row/column"。使用 IE11 和下面的 Chrome 进行测试。

http://codepen.io/anon/pen/oXyEpY

<script>
  angular.module('MyApp').controller('AppCtrl', function($scope) {});
</script>

<div ng-controller="AppCtrl" ng-app="MyApp">
  <div style="height: 150px;width: 100%">
    <div style="background:#F00;border: 1px solid black;display: " layout-fill>
      <div style="background:#CCC" layout-fill>
        Section A (No layout, no flex)
      </div>
    </div>
  </div>

  <div layout="row" style="height: 150px">
    <div layout="column" style="background:#0005EF;border: 1px solid black;" flex>
      <div style="background:#CCC">
        Section B (Using layout, Without Flex)
      </div>
    </div>
  </div>

  <div layout="row" style="height: 150px">
    <div layout="column" style="background:#0FFF00;border: 1px solid black;" flex>
      <div style="background:#CCC" flex>
        Section C (Using layout, With Flex)
      </div>
    </div>
  </div>
</div>

出于示例的目的，我删除了 CSS/JS 文件。希望这对您有所帮助。

Link 到 angular material 中的布局：https://material.angularjs.org/latest/#/layout/container

IE 中的嵌套 <div>（带 flex 框）未填满父元素的全高

Nested <div> (with flex box) in IE does not fill full height of parent element

css

html

internet-explorer

angular-material