Unexpected scrolling behavior within flex element

Question

Could somebody explain why the top section is being cut off here:

https://jsbin.com/yuhexoz/edit

<div 
  style="
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 100px; 
    left:100px;
    width:200px;
    height: 200px;
    background: green;
    overflow: auto;
  ">
  <div
    style="
      height:400px;
      margin: 40px 0;
      height:430px;
      width: 100px;
      background: red;
      border: solid 10px;
    ">
  </div>
</div>

---

I managed to fix it here, but I'd still like to know what causes that behavior:

https://jsbin.com/finujeq/edit

<div 
  style="
    position: relative;
    top: 100px; 
    left:100px;
    width:200px;
    height: 200px;
    background: green;
    overflow: auto;
  ">
  <div style="
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      min-height: 100%;
  ">
    <div
      style="
        margin: 40px 0;
        height:430px;
        width: 100px;
        background: red;
        border: solid 10px;
      ">
    </div>
  </div>
</div>