如何防止滚动条出现在模态背景顶部

Question

我将固定位置模态放置在相对定位的元素内，没有转换且带有溢出：自动。

问题是，当父级溢出时，模式的背景不会覆盖滚动条 - 请查看所附图片的示例。

滚动条也应该被半透明的黑色背景覆盖，但由于某种原因它没有被覆盖。有谁知道为什么，和/或我如何解决这个问题？

我想避免对模式容器使用绝对定位，因为它可以是任何任意层次结构中的嵌套元素。

这是我的 .modal-container 类的 css，其中包括背景。

.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}