pero - personalizar scrollbar css3

Barra de desplazamiento vertical conduce a la barra de desplazamiento horizontal

Question

Mi CSS se ve así:

div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: auto;
overflow: auto;
...
}

La altura div y la escala de ancho de forma automática. Sin embargo, la altura ha fijado un máximo: tan pronto como se alcanza este valor, aparecen barras de desplazamiento verticales. Esto funciona todo muy bien.

Ahora el tema:
Si aparecen las barras de desplazamiento verticales, ocupan alrededor de 10 px de espacio horizontal , ya que las barras de desplazamiento se colocarán dentro del div .
Sin embargo, el ancho no se escala automáticamente para permitir estos píxeles adicionales de 10 y tantos utilizados por las barras de desplazamiento vertical. Como el ancho horizontal antes de agregar las barras de desplazamiento verticales era exactamente correcto para el contenido (como se esperaba de la configuración width:auto de la width:auto ), la div ahora también muestra barras de desplazamiento horizontales, para permitir los 10 píxeles faltantes. Esto es tonto

• ¿Cómo puedo evitar tener estas barras de desplazamiento horizontales y simplemente escalar automáticamente el ancho del div para hacer que encajen las barras de desplazamiento vertical?

Si es posible, estoy buscando una solución que no se base solo en deshabilitar completamente el desplazamiento horizontal, ya que probablemente sea necesario en algún momento (es decir, para ciertas entradas).

Answer 1

Encontré una solución que está funcionando pero lejos de ser perfecta:

Agregué un padding-right : 15px a mi div, para hacer crecer automáticamente todo el div. Ahora, si aparecen las barras de desplazamiento verticales, encajan dentro del relleno, por lo que el ancho horizontal aún está bien.

Lamentablemente, el relleno, por supuesto, también se muestra cuando no se necesita un desplazamiento vertical, lo que hace que mi div sea un poco más ancho de lo que debería ser ...: / Bueno, en mi opinión, esto es aún preferible a las barras de desplazamiento horizontal innecesarias.

Answer 2

Simplemente descubrí una solución bastante pasable (al menos para mi versión de este problema).

Asumo que el problema con el width: auto es que se comporta de manera similar al width: 100vw ; el problema es que cuando aparece la barra de desplazamiento vertical, el ancho de la ventana gráfica sigue siendo el mismo (a pesar de la barra de desplazamiento de ~ 10px), pero el área visible (como lo llamo) se reduce en 10px.

Aparentemente, definir el ancho por porcentaje lo define en términos de esta "área visible", por lo que cambiar su código a:

div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: 100%;
overflow: auto;
...
}

Debe permitir que el contenido se vuelva a escalar correctamente!

ps También puede agregar overflow-x: hidden , que impedirá que aparezca la barra de desplazamiento horizontal, en lugar de eso, simplemente corte ~ 10px del lado derecho de su div cuando aparezca la barra de desplazamiento vertical.