¿Cómo desplazarse correctamente en Safari mobile (iPad)?

Necesito manejar tanto el desplazamiento horizontal como el vertical de una manera simple, que funciona en Safari mobile en general y iPad en peculiar.

Tengo un marco HTML / CSS muy simple que quería mantener muy simple, descrito de la siguiente manera.

Encuentra el violín relacionado aquí .

Scroller horizontal

Desafortunadamente, esto requiere que calcule el ancho del desplazamiento, dependiendo del contenido. ¿Hay una manera automática?

El HTML es el siguiente:

Y el CSS relacionado de la siguiente manera:

 .hScrollable { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space:nowrap; } scrollerContainer { -webkit-box-sizing: border-box; width: 100%; height: 50px; margin: 0; border: solid 1px black; } .scroller { -webkit-box-sizing: border-box; margin: 0; padding: 4px; white-space: nowrap; overflow: hidden; /* Really important to avoid vertical scrolling on devices */ width: 100%; height: 50px; background-color: lightgray; } .scroller>div { width: 50px; height: 50px; display: inline-block; } 

Desplazador vertical

Me gustaría que el contenido llene el contenedor principal, y excede el tamaño vertical, deslícese verticalmente.

El HTML es el siguiente:

 
Fixed content, I dont want to vscroll
Potentially long content that should vscroll. This div should fill to the end of the container. I don't want to set its height to 300px, but to find a way it does automatically.

Tuviste un poco demasiado css sucediendo allí. Actualicé tu violín con las propiedades que moví / quité.

.hScrollable y .scrollerContainer de la CSS y agregué las propiedades de desbordamiento a la derecha de .scroller .

Así que .scroller ahora se ve así:

 .scroller { -webkit-box-sizing: border-box; margin: 0; padding: 4px; width: 100%; background-color: lightgray; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space:nowrap; } 

Aquí está el violín .