html - Why CSS height 100% overflow parent? -

why #red element bigger parent when css 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; /* height used exemple, cannot known.  */    max-height: 100%;  }

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

because answers doesn't seem understand need, mean not clear on purpose (my bad, sorry).

what like:

the #red element have same height parent, #black element (so no scroll-bar, no overflow, , no hidden space). #black element's height may change (so cannot have exact height) bounded max-height.

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

therefore, other height or max-height or 100% ignored, because 100% on unknown unknown.

the reason #red has height because it's child - #grey - has height of 100px

change max-height: 50px height: 50px on #black , you'll see work should:

#black {    background-color: black;    padding: 5px;    height:50px;  }    #red {    background-color: red;    padding: 5px;    height:100%;  }    #grey {    background-color: grey;     height: 100px; /* height used exemple, cannot known.  */    max-height: 100%;  }

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