css - flex 元素中的意外滚动行为

Question

有人可以解释为什么顶部被截断：

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>

---

我设法在这里修复它，但我仍然想知道导致这种行为的原因：

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>

标签： cssflexbox