居中的弹性项目不可见溢出

Question

在下面的代码片段中，我有一个使用flexbox居中的项目。顶部和底部都有清晰的边框，但是如您所见，当align-items设置为center时，顶部边框被切除。

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content {
  width: 200px;
  height: 300px;
  background: skyblue;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
}

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

如果我将align-items更改为flex-start，则现在可以滚动整个容器，并同时看到顶部和底部边框：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
}

.content {
  width: 200px;
  height: 300px;
  background: skyblue;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
}

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

为什么会这样？我希望容器在其父容器中居中，同时能够在容器溢出时滚动容器的整个长度。

这里也是指向CodePen上的代码的链接：https://codepen.io/robkom/pen/WyyQZa。