HTML
<div class="box">
<div class="div1" style="background:red;"></div>
<div class="div2" style="background:blue;"></div>
<div class="div3" style="background:peru;"></div>
</div>CSS
html,body,.box{
height: 100%;
width: 100%;
margin:0;
padding: 0;
}
.box{
display:flex;
flex-wrap: wrap;
}
.div1,.div2{
width:50%;
height: 80%;
}
.div3{
flex:1;
height:20%;
width: 100%;
/* border:1px solid -sharp000; */
}.div3 has border to achieve the desired layout effect. Without this attribute, the width of .div3 will become zero.