Top of scrollable div not visible

Question

I need to add a vertically scrollable div in my project. The div is a list of items with fixed height. I can't figure out why the top area of the div is not visible. Below is some sample code. As you can see, the first element of the list is not entirely visible.

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
}

.content {
  width: 75%;
  max-height: 500px;

  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.post-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  background-color: rgba(0, 0, 0, 0.03);
  width: 95%;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

.post-item {
  border: 1px solid black;
  width: 100%;
  margin: 0.5rem;
}

.test {
  height: 8rem;
  background-color: rgba(255, 0, 0, 0.1);
  width: 100%;
  text-align: center;
}

<div class="main-container">
  <div class="content">
    <h1>Some list</h1>
    
    <div class="post-list">

      <div class="post-item"> <div class="test"> 1. some content </div> </div>
      <div class="post-item"> <div class="test"> 2. some content </div> </div>
      <div class="post-item"> <div class="test"> 3. some content </div> </div>
      <div class="post-item"> <div class="test"> 4. some content </div> </div>

    </div>
  </div>
</div>

https://jsfiddle.net/1dphx94s/8/

Answer 1

While the accepted answer works to resolve this issue. But it's not a complete solution, because if one wants the inner content to be centered when the content is not overflowing the flex container and still want to avoid this issue, then this solution doesn't work. There are 2 possible solutions for a complete solution. But first the Problem: Problem in short is that justify-content: center doesn't know how to center the content which is bigger than it's container(overflowing), so it misbehaves like this.

Solutions:

1. Use justify-content: safe center. But this isn't supported in safari
2. Use margin: auto for each of the contents(elements) under the flex containers

For detailed explanations refer to this answer: Can't scroll to top of flex item that is overflowing container

Answer 2

Just remove justify-content: center in post-list it places all the content in the center of div and makes huge struggling which is not necessary in our case, you just need to center elements on X-axis, flex and align-items are enough

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
}

.content {
  width: 75%;
  max-height: 500px;

  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.post-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/


  background-color: rgba(0, 0, 0, 0.03);
  width: 95%;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

.post-item {
  border: 1px solid black;
  width: 100%;
  margin: 0.5rem;
}

.test {
  height: 8rem;
  background-color: rgba(255, 0, 0, 0.1);
  width: 100%;
  text-align: center;
}

<div class="main-container">
  <div class="content">
    <h1>Some list</h1>
    
    <div class="post-list">

      <div class="post-item"> <div class="test"> 1. some content </div> </div>
      <div class="post-item"> <div class="test"> 2. some content </div> </div>
      <div class="post-item"> <div class="test"> 3. some content </div> </div>
      <div class="post-item"> <div class="test"> 4. some content </div> </div>

    </div>
  </div>
</div>