Shrink vertical spacing between fixed-size boxes to fit list within parent's bounds

Try this code

<div class="box">

  <div class="stack a">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="label">A</div>

  </div>

  <div class="stack b">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="label">B</div>

  </div>

  <div class="stack c">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="label">C</div>

  </div>

  <div class="stack d">

    <div class="surr"><div class="item" style="margin-top: -0%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -25%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -50%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -75%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -100%;"></div></div>

    <div class="label">D</div>

  </div>

  <div class="stack e">

    <div class="surr"><div class="item" style="margin-top: -0%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -12.5%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -25%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -37.5%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -50%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -62.5%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -75%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -87.5%;"></div></div>

    <div class="surr"><div class="item" style="margin-top: -100%;"></div></div>

    <div class="label">E</div>

  </div>

</div>

css:

.box {

  margin-top: 25px;

  

  border: 2px solid #000;

  

  display: flex;

  flex-direction: row;

}

.stack {

  position: relative;

  box-sizing: border-box;

  width: 15%;

  padding: 5px 5px 0 5px;

  margin: 0 10px;

  

  background: #fff;

  border-left: 1px solid #ddd;

  border-right: 1px solid #ddd;

}

.label {

  position: absolute;

  top: -20px;

  left: 50%;

  width: 20px;

  height: 20px;

  margin-left: -10px;

  text-align: center;

}

.item {

  box-sizing: border-box;

  height: 0;

  padding-top: 80%; /* aspect ratio */

  margin-bottom: 5px;

  

  background: #fff;

  border: 1px solid #333;

}

.stack.a .item:not(:first-child),

.stack.b .item:not(:first-child),

.stack.c .item:not(:first-child) {

  margin-top: -60%;

}

.stack.d, .stack.e {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.surr {

  height: 0;

}

ouput: