内部要素が親の高さ要素を延長しない

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>