使用溢出-y 在导航栏中显示 div：滚动

Question

我正在尝试显示一个模态，问题是模态位于导航栏中，该导航栏中的“溢出-y”属性设置为“滚动”，这使值“溢出-x”变为“自动”，因此不是允许显示 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 导航栏中的“p”标签中写入的一些文本，但是一旦您擦除“p”标签内的文本，div 将返回到后台。 现在至于模态，我也修改了代码。 模式中的黑色背景将不可见，但其中的所有文本都将可见。 它不会像以前那样被切碎。