absolute div not inheriting height of relative parent with fixed height

Question

I have a th and a div inside it. the th is positioned relative and the child div is positioned absolute. (see div class="horizontal")

The child div is not inheriting the parent height in percentage as you can see in the fiddle

http://jsfiddle.net/gaurav5430/fmrWj/1/

As per my knowledge, the absolute div should inherit its dimensions from its bounding-box, which can be a relative element with a specific height, which i think is the case here.

P.S : tested in IE9.

Answer 1

For those who don't want to use tables, use height: inherit. In my case, the problem was that the parent (B) had a percentage height of its parent (A) so when using absolute positioning, the absolute child of B needed to be 100% of B but ended up being 100% of the body.

Check the sample below (this seems to only work when the parent has something set for height):

#parent {
  width: 200px;
  height: 70px;
  background-color: pink;
  display: flex;
  flex-direction: row;
}
#child-not-absolue-or-fixed {
  background-color: lightblue;
  width: 80px;
  height: 100%;
}
#child-absolue-or-fixed {
  background-color: tomato;
  width: 80px;
  height: inherit;
  position: absolute;
  left: 100px;
}

<div id="parent">
  <div id="child-not-absolue-or-fixed"></div>
  <div id="child-absolue-or-fixed"></div>
</div>