Overflow not visible for centered flex item

Question

In the code snipped below, I have an item that I centered using flexbox. There is a clear top and bottom border, but as you can see, the top border is cut off when align-items is set to 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>

If I change align-items to flex-start, you can now scroll the entire container and see both the top and bottom border:

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>

Why does this happen? I would like to have the container centered in its parent while being able to scroll the entire length of it if it overflows.

Here is a link to the code on CodePen as well: https://codepen.io/robkom/pen/WyyQZa.