更新

在content为的子div上添加margin: auto似乎可以解决这个问题：

#overlay > div { margin: auto; }

将safe用于align-items将是一个很好的解决方案，但目前它只适用于Firefox：

align-items: safe center;

示例：
第一次

移除#overlay.active上的align-items:center;，内容就会如预期般卷动。#overlay.active只有一个子项目，因此align-items（会定义flex项目如何在目前行上沿着横轴配置）实际上并没有任何视觉效果

若要避免在 windows 未来内容时裁剪覆盖图上的内容，可以尝试使用以下CSS样式：

body {
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}

溢出：body元素上的hidden样式将阻止在主页上滚动，而overflow-y：滚动和溢出-x：.overlay元素上的隐藏样式将允许在覆盖图上滚动，同时隐藏水平方向上的任何溢出。这将允许用户滚动覆盖图上的内容，而不会剪切它。
或者，您也可以使用溢位：auto样式，而不是overflow-y：滚动和溢出-x：隐藏样式。如果内容在任一方向上溢出，这将自动在覆盖层上显示滚动条，允许用户滚动内容而不被剪切。
也值得考虑对覆盖图使用响应式设计，这样它就可以根据视口的大小进行调整，而不会在第一时间溢出。这可以通过使用CSS媒体查询和响应式设计技术来实现。