Pregunta ¿Cómo puedo incluir el ancho de las barras de desplazamiento "overflow: auto;" en un div absoluto de tamaño dinámico?


(Primera pregunta sobre Stack Overflow. Espero hacerlo bien).

Intento crear un menú flotante que herede su ancho de su contenido (ya que no conozco el ancho por adelantado, es decir, cargado desde una URL). Puedo hacer esto teniendo el menú div completamente posicionado sin establecer un ancho o alto.

El problema ocurre cuando el contenido es lo suficientemente alto como para requerir desplazamiento. Configuré "desbordamiento: automático"; para que se pueda desplazar verticalmente, pero la nueva barra de desplazamiento no ensancha el div. En cambio, el div se mantiene del mismo ancho, y la barra de desplazamiento sobresale en su contenido previamente de buen tamaño, lo que obliga a que el contenido se envuelva.

Ejemplo: http://jsfiddle.net/w7Mm8/

En el ejemplo: en Firefox, "cinco" se ajusta a la siguiente línea, pero en Chrome (al menos para Mac), todo se muestra en una línea.

¿Alguna forma elegante de hacer esto sin establecer explícitamente el ancho del menú para incluir el ancho de la barra de desplazamiento?

¡GRACIAS!


27
2017-12-07 02:16


origen


Respuestas:


Tienes pocas opciones.

Utilizar white-space:nowrap; y algo padding.

Utilizar overflow: scroll;, que agrega una barra de desplazamiento adicional en la parte inferior, pero soluciona el problema de envoltura en Firefox.

Utilizar overflow-y:scroll que es CSS3 y solo es compatible con los navegadores modernos.


4
2017-12-07 03:06



Por casualidad me encontré con esto. Ajuste white-space: normal en realidad hizo que Firefox empujara la barra de desplazamiento afuera. Ver http://jsfiddle.net/w7Mm8/36/.

Editar: Espere... no con solo cinco (el violín anterior tenía seis palabras): http://jsfiddle.net/w7Mm8/37/. De alguna manera, la palabra extra hizo que se comportara.

Edit2: Basado en la extraña observación anterior (el white-space: normal realmente no tenía nada que ver con eso, era la palabra extra), existe una extraña "solución" que puede ser útil para algunas personas (y un dolor para los demás). Ver (cinco palabras) http://jsfiddle.net/w7Mm8/49/, (seis palabras) http://jsfiddle.net/w7Mm8/57/. los content debe establecerse en 3 caracteres y no puede ser espacios (de mis experimentos). Nota: el pseudo elemento tiene que estar donde está el contenido del texto, sin importar cuán profundo sea, ver: http://jsfiddle.net/w7Mm8/58/ donde no funciona


1
2017-12-07 04:12