Absolute position height 100% won't work on IE 11 - But it does on Microsoft Edge

Question

Somehow IE 11 is missing my absoluted positioned element within another element with height:100%. It only seems to work if I give it a fixed height. (even though the parent's parent has a fixed one)

HTML

  <div class="parent-table">
    <div class="parent-cell">
      <div class="child">
      </div>
    </div>
  </div>

CSS

html,
body {
  height: 100%
}
.parent-table {
  display: table;
  table-layout: fixed;
  position: relative;
  height: 400px;
  width: 100%;
}

.parent-cell {
  height: 300px;
  background: blue;
  position: relative;
  width: 100%;
  display: table-cell;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  background: red;
  width: 100%
}

Reproduction Online JSFiddle

• IE Edge will show a red box (working as expected)
• IE 11 will show a blue box (totally missing the absoluted positioned element)

Answer 1

This bug has been bugging lots of people forever. Internet explorer needs an intermediate element (now using child class) inside the cell before using an absolute positioned element (now using an inner-child class) inside of it as follows:

<div class="child">
  <div class="inner-child">
  </div>
</div>

The intermediate element should be styled as follows:

.child {
  display:inline-block;
  width:100%;
  height:100%;
  position:relative;
}

Here is the fiddle with the working solution on IE11 - but works on previous versions as well.

https://jsfiddle.net/efvLdmtt/7/