Flex items at the top are cut off

Question

My problem is that flex items are cut off at the top when the div overflows. I've tried many things but couldn't get over this problem. Thank you for helping!

Here is a JSFidle showing the problem:

#root{
  width: 100%;
  height: 100%;
}

#flex-container{
  height: 400px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: auto;
  flex-wrap: wrap;
}

.flex-child{
  width: 235px;
  height: 235px;
  background-color: #000000;
  margin: 10px;
}

<div id="root">
  <div id="flex-container">
    <div class="flex-child">
    </div>
    <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
     <div class="flex-child">
    </div>
  </div>
 </div>