使用overflow-y: scroll在导航栏中显示div

Question

我试图显示一个模态，问题是模态是在一个导航栏里面，它的'overflow-y'属性设置为'scroll'，这是使值'overflow-x'到'auto'，从而不允许在x轴上溢出的孩子，被显示。我正在寻找一种方法，而不是只是移动模式的导航栏(这不是我现在可以做的事情)。有没有一种方法通过css来忽略父元素上的overflow-y属性?

我做了一个小提琴与我正在寻找的一个类似的情况:https://jsfiddle.net/aje31y7L/2/

<div class="background">
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">

</div>
</div>
</nav>
</div>

当前模式将显示修剪，因为它的一部分被导航条隐藏。如有任何帮助，不胜感激。

Answer 1

.background {
width: 100vw;
height: 100vh;
background-color: red;
position: relative;
}
.navbar {
display: block;
width: 400px;
left: -400px;
top: 0;
position: relative;
background: black;
max-height: 100%;
overflow-y: scroll;
transform: translateX(400px);
min-height: 100%;
}
.modal-wrapper {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.modal-main {
display: flex;
height: auto;
background-color: grey;
}
h1{
font-size: 100px;
}

<div class="background">
<p>
lorem<br>
ipsum<br>
</p>
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">
<h1>
Lorem Ipsuim lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</h1>
</div>
</div>
</nav>
</div>

我稍微修改了一下代码。当您运行代码片段时，您将能够在div导航栏中看到一些以" "标签，但一旦你删除里面的文字" "标记，div将回到后台。现在关于模态，我也修改了代码。模态中的黑色背景将不可见，但其中的所有文本将可见。它不会像以前那样被切碎了。