Permitir el desbordamiento en el eje y mientras se oculta el desbordamiento en el eje x

Question

Estoy intentando permitir el desbordamiento en el eje y, mientras se oculta el desbordamiento en el eje x. Se podría esperar que la adición de estas propiedades:

.overflow { 
    overflow-x: hidden; 
    overflow-y: visible; 
} 

a bastaría un elemento en bloque, pero debido a algunas peculiaridades de implementación de CSS como se documenta here, esto no funciona realmente. Lo que termina sucediendo es que el valor calculado de overflow-y se convierte en automático, mientras que overflow-x permanece oculto.

¿Hay alguna otra manera de lograr el comportamiento que quiero?

Solo por un poco más de detalle, tengo una lista horizontal de elementos con los que estoy usando botones personalizados para desplazarme. El ancho del elemento contenedor de la lista es mucho menor que el ancho de la lista. No quiero que aparezca una barra de desplazamiento, porque estoy usando mis propios botones personalizados para navegar por la lista, así que necesito que overflow-x esté oculto. Al desplazarme, deseo aplicar una transformación para ampliar el tamaño de los elementos, pero quiero que los elementos se desborden fuera de la parte superior e inferior del elemento contenedor, por lo que es necesario que overflow-y sea visible.

Answer 1

Si no te importa agregar un marcado adicional, parece que hay una solución fácil.

Simplemente tendrá que usar dos div, uno para cada desbordamiento.

Por ejemplo:

<div class="outer"> 
    <div class="middle"> 
     <!-- your content here --> 
    </div> 
</div> 

Y el siguiente marcado:

.outer { 
    overflow-y: visible; 
} 

.middle{ 
    overflow-x: hidden; 
} 

parece hacer el trabajo.

Un pequeño ejemplo here.