Html Css-响应性分屏布局

我是网络开发的新手。我正在使用react创建一个响应性的分屏注册页面，但当我调整屏幕大小的高度时，表单无法完全显示。有人知道我的css的哪一部分是错误的或缺失的吗

图片：

---

代码在沙箱中

2个需要注意的重要事项：

100vh作为高度将为元素提供浏览器窗口的高度

溢出：当元素高于其父元素时，如果溢出设置为隐藏，则部分内容可能不可见

我在底部添加了一条关于屏幕高度的规则（仅用于演示）：

@media screen and (max-height: 500px) {
  .split-screen {
  flex-direction: row;
  height: 100%;
}

.sign-up-container .right {
  display: flex;
  width: 50%;
  height: 100%;
  overflow: visible;
}
.sign-up-container .left {
  min-height: 500px;
  }
}