Evenly Distribute Divs Problem.

HTML

<div class="wrap">
<div class="thing-wrap">


    <div class="thing"> thing1 </div>
    <div class="thing"> thing2 </div>
    <div class="thing"> thing3 </div>
    <div class="thing"> thing4 </div>
    <div class="thing"> thing5 </div>
    <div class="thing"> thing6 </div>
    <div class="thing"> thing7 </div>
    <div class="thing"> thing8 </div>
    <div class="thing"> thing9 </div>
    <div class="thing"> thing10 </div>
    <div class="thing"> thing11 </div>
    </div>
</div>

CSS

.wrap {
    /*
	I wish this worked cross-browser
    column-fill: balance;
	*/
    height: 180px;

    /* Gradient to stripe columns */
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%);
}

.thing-wrap {
     display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  width: 100%;
  height: 100%;

}
.thing {
    

    background: rgba(255, 255, 255, .2);
    color: #fff;
    text-align: center;
    width: 25%;
    flex-basis: 60px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}


body {
    font-family: sans-serif;
}