In the following code,in Boxes1, .fourth div stretches properly,but in Boxes2, .fourth div does not.I do not understand the relation.
And how does .first div affecting the .fourth div is quite surprising.
I am really confused.
.first { display: flex; width: 100vw;}.second { flex: 1; display: flex; flex-direction: column; min-height: 200px; border: 1px solid red; padding: 3px;}.third { flex: 1; border: 2px solid green; padding: 3px;}.fourth { border: 2px solid blue; padding: 3px; height: 100%;}Boxes1<div class="first"><div class="second"><div class="third"><div class="fourth"></div></div></div></div> Boxes2<div class="second"><div class="third"><div class="fourth"></div></div></div>