CSS overflow-y: visible, overflow-x: scroll

Question

He visto algunas preguntas como esta en mi búsqueda, pero o bien la pregunta no se respondió correctamente o no se dio ninguna respuesta. Entonces, preguntaré de nuevo.

<style> 
.parent { overflow-y:scroll; overflow-x:visible; width:100px; } 
.child { position:relative; } 
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } 
</style> 

    <div class="parent"> 
    <!-- Lots of the following divs --> 
    <div class="child"> 
    Text Line 
    <div class="child-menu">some pop out stuff</div> 
    </div> 
</div> 

Muy bien, eso es sólo un ejemplo. Pero básicamente, lo que intento lograr es que las clases .child se puedan desplazar en el eje y ... desplazarse hacia arriba y hacia abajo. Pero quiero que el eje x ... el menú del niño sea visible fuera del contenedor .parent.

¿Tiene sentido? Entonces, lo que está sucediendo es que cuando se renderiza la página, el navegador interpreta el desbordamiento como automático y no respeta el eje separado. ¿Estoy haciendo algo mal o los navegadores aún no están a la altura de las especificaciones de CSS3 en esto? Mayormente solo probado en Chrome.

Answer 1

¡Lo descubrí!

El padre debe estar desbordado: automático; El .child debe ser position: relative; El menú .child debe estar en la posición: fijo; con NO posición superior o izquierda. Si hace esto, lo mantendrá en línea con el contenido.

Si necesita mover el menú secundario, use márgenes y no arriba o izquierda. Ejemplo margin-left: -100px;

Answer 2

¡Resuelto aquí! Usan css y JS.

.child:hover .child-menu { display: block; } 

.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } 
    .child { position:static; } 
    .child-menu { position:absolute; display:inline-block; display: none; } 

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/