Cómo agregar barras de desplazamiento a mi HTML que desaparecen si el contenido es más pequeño que el límite

Question

Estoy intentando crear un formulario que tiene un widget expandible. El problema es que cuando el widget está abierto, el formulario se extiende fuera del límite en el cuadro de contenido y se ve mal.

Intenté usar overflow: scroll pero crea 2 barras de desplazamiento feas que no desaparecen, incluso si el contenido es más pequeño que el cuadro de contenido. Solo necesito una barra de desplazamiento vertical.

Visual Studio también alertó que overflow-y no está disponible en CSS.

Answer 1

Cambie su desbordamiento a auto y defina la altura y / o el ancho del elemento.

Answer 2

overflow-x y overflow-y son parte de la propuesta de CSS3 y funcionan en todas las versiones actuales de los cuatro grandes navegadores.

Generalmente hago:

overflow: auto;
overflow-x: auto;
overflow-y: auto;

El motivo es que a veces los navegadores tratan a overflow: auto como overflow: scroll (dos barras de desplazamiento feas) tan pronto como el contenido se desborda en una dirección, pero esos navegadores ya son compatibles overflow-x y overflow-y , que tienen prioridad.

Answer 3

Swilliams dio una buena respuesta sobre cómo tratar el síntoma. Sin embargo, es posible que también desee pensar en la causa raíz: si el cuadro de contenido no estuviera limitado a un tamaño fijo, podría reducirse y / o expandirse para adaptarse a cualquier forma de tamaño, sin barras de desplazamiento. Las páginas web son flexibles por diseño, y los intentos de " corregir " esa flexibilidad generalmente termina por tener problemas de este tipo.