Child is not rendering %height of parent?

Question

Here is the link to my fiddle for reference.

.container {
  background-color: gray;
  position: relative;
  padding: 20px;
  height: 70%;
  /* uncomment this and will work as expected */
  /* height: 70px; */
}

.child1 {
  width: 75%;
  display: inline-block;
  height: 100px;
}

.child2 {
  background-color: green;
  width: 75%;
  float: right;
  height: 100%;
}

<div class="container">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

Parent's height is 100px(can see in devtools) after calculation for child1. Child2 is applied 100% height equaling to 100px, but in computed style(can see in devtools) it is showing 0px.

I am assuming it's because parent's height is calculated at run-time. Any help?

try `height: 100vh;` to `child2` :https://jsfiddle.net/wvs98mua/21/ — לבני מלכה, Jul 24 '18 at 05:45
yes, vh is working, if you are using height in %, you need to set px height for the parent. But the parent can be of any level, may be body will also work. — Pons Purushothaman, Jul 24 '18 at 05:49

score 1 · Accepted Answer · answered Jul 24 '18 at 05:48

Because parent height is also in percentage. It will work in the following conditions:

Parent of your div has 100% height
Parent of your div has fixed height
Parent of your div has some content and due to which it has some height.

Currently, it does not know 100% of what.

score 0 · Answer 2 · answered Jul 24 '18 at 05:49

Using a % value in height requires one of the following:

If all parent elements have a percentage height, ALL parent elements to have their height explicitly defined.
Otherwise, a parent element must have a fixed height (not a %).

The parent of your .container element probably doesn't have a height value defined, or the parent of that element, etc.

Remember that the html and body elements count too.

html, body
{
    height: 100%;
}

Child is not rendering %height of parent?

2 Answers2