Css flex元素中的意外滚动行为

有人能解释一下为什么这里的顶部被切断了吗：

---

我设法在这里修复了它，但我仍然想知道是什么导致了这种行为：

第一个dup将给出快速解释，第二个dup将给出深入解释one@TemaniAfif谢谢，很有帮助。

<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>

<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>