.flex-body {
display: flex;
flex-wrap: wrap;
}
.flex-body div{
width: 50%;
align-items: flex-start;
}<div class="flex-body">
<div style="background: #0980cc; height:100px;"></div>
<div style="background: #09cc69;height: 200px;"></div>
<div style="background: #cc092f;height:170px;"></div>
<div style="background: #0980cc; height:130px;"></div>
<div style="background: #09cc69;height: 100px;"></div>
<div style="background: yellow;height: 100px;"></div>
</div>I am trying to make the elements within a flex container stack directly on top of each other with the white space between rows filled. Each element has a different height, which is making it challenging. Any suggestions?
Feel free to view and experiment with this fiddle link