Inner element does not extends parent height element

Question

Why green element does not extends blue elements heights?

I cant set this to work properly,is there any solution to make deeper element to extend container?Yellow must have fixed height its is a masonry grid in real life example and i dont know why it doesnt stretch to inner elements properly.

 .blue { width:100vw; min-height:100vh; background-color:blue; padding:5px; } .yellow { background-color:yellow; height:100px; width:100px; padding:5px; } .green { background-color:green; height:1500px; width:50px; } 

 <div class="blue"> <div class="yellow"> <div class="green"> </div> </div> </div> 

Answer 1

I'm not sure what you want. Is this?

 .blue { float:left; width:100vw; min-height:100%; background-color:blue; padding:5px; } .yellow { background-color:yellow; height:100px; width:100px; padding:5px; } .green { float:left; background-color:green; height:1500px; width:50px; } 

 <div class="blue"> <div class="yellow"> <div class="green"> </div> </div> </div>