删除包装元素的多余空间

Question

我在页面上有一个框列表，我希望能够配置它们以在屏幕上没有足够空间时自动换行。

现在，当包装盒包装好时，它在右侧保留了一个类似的空白空间。

我想通过拧紧蓝色容器以使其两侧不留任何空间或使粉红色框居中，从而移除右侧的多余（蓝色）空白区域。

有几个要求。 1.蓝色容器的宽度由其父容器决定。因此，它应该随着父母大​​小的变化而增长和收缩。容器的宽度不应固定。 2.粉色盒子的数量是任意的，重点是要包装而没有空间。 3.尽可能使用CSS。 （我不知道是否只能在CSS中完成）

我尝试过flex并只是尝试inline-block，但到目前为止都没有解决。我真的很想知道如何才能在CSS中做到这一点。

我的代码

html, body {
  height: 100%;
}
div {
  outline: 1px solid black;
}

.track {
  margin: 10px auto;
  background: lightblue;
  display: inline-block;
  width: auto;
  height: fit-content;
}

.item {
  display: inline-block;
  background: lightpink;
  height: 250px;
  width: 250px;
  margin: 10px;
  margin-right: 0;
}

  <div class="track">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>