How to force child div to be 100% of parent div's height without specifying parent's height?

Question

I have a site with the following structure:

  

  <         


        
      

Answer 1

After long searching and try, nothing solved my problem except

style = "height:100%;"

on the children div

and for parent apply this

.parent {
    display: flex;
    flex-direction: column;
}

also, I am using bootstrap and this did not corrupt the responsive for me.