How can I properly display my divs in masonry style using flex?

Question

I'm trying to create display divs in a masonry style using flex/flexbox. It must be a maximum of 2 columns. Each div have the same width (so it would split into 2 columns evenly), but the the height varies depending on the content of the div. So some height will be smaller than others.

Straight to the problem:
http://i.imgur.com/6wsS8nV.png

The blue boxes are my divs (child) with content in each one of them. You can notice that they have same width and some have smaller height than others.

Problem: There's a LARGE gap between the top and bottom child on the left column. The bottom child should move up to the bottom of the top child. How can I do this?

EDIT:

Here is the CSS in use:

#main {
   width: 100%;
   height: auto;
   display: -webkit-flex; /* Safari */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.divBob {
   -webkit-flex: 1;  /* Safari 6.1+ */
   -ms-flex: 1;  /* IE 10 */    
   flex: 0 1 auto;
   padding: 5px;
   border: 1px solid #CCE0FF;
   margin: 5px;
   width: 45%;
   height: 100%;
   background-color: #F0F3FA;//#F9FBFF;
}

.divBob:nth-child(2n+1) {
   clear: right;   
}

Answer 1

Is there any reason it has to be with flexbox?

If you don't mind using an alternative method this tutorial will show you exactly how to create masonry-style layouts. Here's what you'll end up with .

The demo markup is as follows:

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
   <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
   <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

We make use of the CSS properties column-count and column-gap which are applied to the parent element to determine the number of columns in your layout:

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

you then need to apply this style to each child:

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

The tutorial also provides a link to a JS fallback for older browsers

and that's all you need to create a Masonry-style layout :)