I'm trying to display a modal, the issue is the modal is inside a navbar which has the 'overflow-y' property set to 'scroll', which is making the value 'overflow-x' to 'auto', thus not allowing overflowing children on the x-asis, to be displayed. I'm looking for a way around this other than just moving the modal out of the navbar (It's not something that I can do for now). Is there a way via css to ignore the overflow-y property on the parent?
I made a fiddle with a similar case to the one I'm looking for: https://jsfiddle.net/aje31y7L/2/
<div class="background">
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">
</div>
</div>
</nav>
</div>
Currently the modal will appeared trimmed as part of it is hidden by the navbar. Any help is appreciated.
.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>I have modified the code a little bit. As you run the snippet you will be able to see some text written in the div navbar in "p" tags but as soon as you erase the text inside "p" tags the div will go back in the background. Now as for the modal is concerned, I have modified the code too. The black background in the modal will not be visible but all the text inside it will be visible. It won't be chopped like before.