I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some divs will be shorter than others.
Getting straight to the issue:
https://i.sstatic.net/Jfmqh.png
The blue boxes represent my divs (children) with distinct content in each. You can observe that they share the same width and some have less height than others.
Issue: There is a noticeable gap between the top and bottom child in the left column. The lower child should move up to align with the bottom of the upper child. How can I resolve this?
UPDATE:
Here's the CSS being utilized:
#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;
}