javascript - Wrap arround an higher element -

i've list elements in there. if item has same high, items wrapping correctly. if single item has bigger high others, items wrapping @ bottom of higher element.

here can see example: https://jsfiddle.net/qqouol6n/

here simple html list:

<div id="flexbox-container">   <div class="small-container"></div>   <div class="big-container"></div>   <div class="small-container"></div>   <div class="small-container"></div>   <div class="small-container"></div>   <div class="small-container"></div> </div> 

as can see, there 1 div, class represents higher items other ones. here css:

#flexbox-container {   width: 220px;   background-color: lightgrey;   display: flex;   flex-wrap: wrap;   flex-direction: row;   padding: 10px; }  .big-container {   background-color: orange;   width: 100px;   height: 200px;   margin-right: 10px;   margin-bottom: 10px; }  .small-container {   background-color: orange;   width: 100px;   height: 110px;   margin-right: 10px;   margin-bottom: 10px; } 

i using flexbox float these items. if items has same high, works expected. but, if second items has double high other elements, items ignore gap.

i want achieve, gap filled next item, how can this?

you change use flex-direction: column instead, you'll same issue if 1 of items wider others. you'd need specify height attribute on #flexbox-container div ensure columns did indeed wrap rather continue down page.

something this:

#flexbox-container {   width: 220px;   height: 500px;   background-color: lightgrey;   display: flex;   flex-wrap: wrap;   flex-direction: column;   padding: 10px; } 

here's updated jsfiddle.