CSS flex fit in as many as possible without any empty space

Question

I want to fit as many divs as possible. Basically, create Russian nested dolls

Basically .dashboard > .lab > .colocation > .rack > buttons

This is what it looks like: notice there are a lot of empty spaces that could be filled. How to do that?

This is my attempt:

.dashboard {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.lab {
  border: 1px solid brown;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  max-width: 100rem;
  flex: 1;
  align-items: flex-start;

  span {
    color: brown;
  }
}

.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 I want: no empty spaces and packing as many divs and children as possible

jsfiddle