css - CSS在flexbox容器中用边距包装项目，固定高度溢出到顶部

Question

我有一个具有设定大小的 flexbox 容器，以及包裹并应该定位在容器中的总中心的项目，但是如果它们溢出容器，容器应该垂直滚动。但是，它们的边距会导致第一行中的第一个项目没有完全包含在滚动容器中。有人知道如何解决这个问题吗？

.container {
  width: 400px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: blue;
  overflow-y: auto;
}

.container > div {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 32px;

}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>