CSS flexbox fit in as many as possible without any empty space [duplicate]

I want to fit as many divs as possible. No empty spaces using flexbox.

<div class="colocation"><span>colocation name</span><div class="rack"><span style="text-align: center;">rack name</span><div class="vstack"><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-info btn-sm">X</button></div></div><div class="rack"><span style="text-align: center;">rack name</span><div class="vstack"><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-dark btn-sm">X</button><button type="button" class="btn btn-info btn-sm">X</button></div></div></div>

This is my attempt:

.colocation {  border: 1px solid blue;  flex-wrap: wrap;  display: flex;  max-width: 50rem;  flex: 1;  align-items: flex-start;  span {    color: blue;  }}.rack {  border: 1px solid red;  width: 5rem;  flex: 1;  span {    color: red;  }}

This is what it looks like

But I want all the empty spaces to be filled and at top-left we have the label:

jsfiddle