Why CSS height 100% overflow parent?

Question

Why is the #red element bigger than its parent when its CSS clearly says height: 100%?

#black {
  background-color: black;
  padding: 5px;
  max-height:50px;
}

#red {
  background-color: red;
  padding: 5px;
  height:100%;
}

#grey {
  background-color: grey; 
  height: 100px; /* The height is just used as an exemple, it cannot be known.  */
  max-height: 100%;
}

<div id="black">
    <div id="red">
      <div id="grey"></div>
    </div>
</div>

Because some answers doesn't seem to understand the need, this mean I was not clear on my purpose (my bad, sorry).

What I would like:

The #red element to have the same height as its parent, the #black element (so no scroll-bar, no overflow, and no hidden space). The #black element's height may change (so it cannot have an exact height) but is bounded with max-height.

Answer 1

#black does not have a height (it has a max-height).

Therefore, all other height or max-height or 100% is ignored, because 100% on unknown is unknown.

The only reason #red has a height is because it's child - #grey - has a height of 100px

Change max-height: 50px to height: 50px on #black and you'll see everything work exactly as it should:

#black {
  background-color: black;
  padding: 5px;
  height:50px;
}

#red {
  background-color: red;
  padding: 5px;
  height:100%;
}

#grey {
  background-color: grey; 
  height: 100px; /* The height is just used as an exemple, it cannot be known.  */
  max-height: 100%;
}

<div id="black">
    <div id="red">
      <div id="grey"></div>
    </div>
</div>