Estoy tratando de mostrar un modal, el problema es que el modal está dentro de una barra de navegación que tiene la propiedad 'overflow-y' establecida en 'scroll', lo que hace que el valor 'overflow-x' sea 'auto', por lo tanto no permitiendo que se muestren niños desbordados en el eje x. Estoy buscando una forma de evitar esto que no sea simplemente mover el modal fuera de la barra de navegación (no es algo que pueda hacer por ahora). ¿Hay alguna forma a través de css de ignorar la propiedad overflow-y en el padre?
Hice un violín con un caso similar al que estoy buscando: https://jsfiddle.net/aje31y7L/2/
<div class="background"> <nav class="navbar"> <div class="modal-wrapper"> <div class="modal-main"> </div> </div> </nav> </div>Actualmente, el modal aparecerá recortado ya que parte de él está oculto por la barra de navegación. Cualquier ayuda es apreciada.
.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>He modificado un poco el código. A medida que ejecuta el fragmento, podrá ver un texto escrito en la barra de navegación div en las etiquetas "p", pero tan pronto como borre el texto dentro de las etiquetas "p", el div volverá al fondo. Ahora, en lo que respecta al modal, también he modificado el código. El fondo negro en el modal no será visible, pero todo el texto dentro de él será visible. No se cortará como antes.