弹性包装盒之间的空格：如何不拉伸最后一行中的项目

Question

我正在尝试在flex容器中列出项目列表，但是我不知道其中有多少项目显示。这些项目正在拉伸以填充容器，其宽度从 flex-basis：125px 开始。在我的网站上，用户可以调整容器的大小，这可能会引起麻烦。问题是，到最后，有时项目的数量比其他任何一行都要少。这意味着最后一行中的项目会有所不同，并且“不遵循网格”。我如何让他们跟随网格？

Here is a link to JSFiddle，您可以在其中看到我的问题的演示。如果您调整输出窗口的大小，您将看到为什么代码无法与我配合。我已经尝试添加 .container :: after ，它将以某种方式填充空间以使最后一行跟随网格，但是它只是不允许最后一项过度增长“太多”

基本的CSS是这样的：

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item{
  flex-basis: 125px;
  flex-grow: 1;
}

我希望这样，如果用户调整窗口大小，它将像这样：

但就我而言，它是这样的：