Why doesn't h-100 work inside d-flex?

Question

Bootstrap

https://codepen.io/semivori/pen/MWwjWzg?editors=1100
why is block 2 height not equal to 100% of parent's height? and how to make block 2 height equal to block 1 height?

Answer 1

Just remove the "h-100" class.
The CSS 2.1 specification point 10.5 will give us the answer .
"If the height of the outer block is calculated from the content, then the height in % does not work, and is replaced by height:auto. Except when the element has position:absolute."
That is, the height property specified in % only works if a height is specified for the outer block.
here more