内部元素不扩展父级高度元素

Question

为什么绿色元素不扩展蓝色元素的高度？

我无法将其设置为正常工作，是否有解决方案以使容器更深一些以扩展容器？黄色必须具有固定的高度，在现实生活中它是一个砌体网格，我不知道为什么它不能适当地拉伸到内部元素。

 .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

我不确定你想要什么。 这是？

 .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>