CODEWITHSUNDEEP
csshtmlinternet-explorerangular-material
Staeff
Staeff

Reputation: 5084

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

I have some <div>s nested inside a container with a fixed height and I want the child elements to fill the whole height of the parent elements. This works great in Chrome, but fails in IE (11 on Windows 8).

(Left: IE Right: Chrome)

IE Chrome

I'm using Angular Material so I want to try to stick to their layout CSS styles if possible.

Example: 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: (vendor prefixes exist in example)

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

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

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

Has anyone also encountered this kind of issue and knows how I can fix it?

Upvotes: 1

Views: 996

Answers (1)

William S
William S

Reputation: 881

If you're using angular along with angular-material, you could consider using layout="row/column". Tested using IE11 and Chrome below.

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>

I got rid of the CSS/JS file for the purpose of the example. Hope this helps anyway.

Link to layouts in angular material: https://material.angularjs.org/latest/#/layout/container

Upvotes: 2

Related Questions