html - 如何防止滚动条出现在模态背景之上

Question

我在一个相对定位的元素内放置了一个固定位置模态，没有变换并且溢出：auto。

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

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

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

这是包含背景的 .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;}

标签： htmlcssbackgroundmodal-dialogcss-position