浏览器无法通过显示正确计算高度：内侧弯曲：固定

Question

在Angular中创建模态时遇到了一个小问题。容器框具有position: fixed，width: 100vw和height: 100vh，以便覆盖所有屏幕。内容具有display: flex，以使其自身的内容垂直对齐。但是，如果两个属性一起使用，它们似乎无法正常工作。

Here is a stackblitz snippet重现该错误。

当我垂直调整浏览器大小并且内容不再适合视口时，问题就开始了。滚动条按预期显示，但是从顶部开始，它从元素的中间开始，我尝试检查了几个小时而不了解为什么会发生。

如何解决display: flex问题？

以下是一些相关代码：

:host { /* modal container*/
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.box-container { /* div used only to make the scrollbar appear */
    height: 100%;
    display: flex; /* comment this line to make it work */
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
}

---

编辑

我还在寻找解决方案，请阅读评论