Making flexbox wrapped items consume vertical space

I'm trying to implement a "collage" layout with flexbox where the items are of undefined heights, but the fixed width can be "left" in a collage style (sort of like pintrest), but I'm having trouble getting the flex items to absorb the extra VERTICAL space.

HMTL

<div class="widget-wrap">
    <div class="widget"> <!-- these elements are generated dynamically -->
        <!-- ~ indeterminate amount of content resulting of varying height ~ -->
    </div>
</div>

      

        
        
        
      

    

CSS

.widget-wrap { 
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.widget {
    width: 33.33333%;
    margin-bottom: 0; /* my best guess */
}

      

        
        
        
      

    

RESULT

As you can see, there are vertical spacing when one widget is larger than the others on the same line (I assume this was expected with align-items: flex-start

), but I would like all elements in subsequent lines to be meaningfully aligned to the element above them in my column, for example on pintrest .