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

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>