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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>