Consideremos cómo podemos controlar el desbordamiento del contenido con la ayuda de una propiedad. A veces sucede que tenemos un width y height fijos para el elemento. Sin embargo, el contenido interno es mucho mayor que el espacio disponible. La propiedad overflow controla el comportamiento del contenido de un elemento cuando excede los valores de height o width establecidos explícitamente para el elemento.

overflow: visible | scroll | hidden | auto

• visible - es el valor predeterminado. El contenido sobrepasa los bordes del elemento y permanece visible;
• scroll - El contenido sobrepasa los bordes del elemento, y aparece una barra de desplazamiento que permite al usuario desplazarse tanto vertical como horizontalmente;
• hidden - El contenido que sobrepasa el tamaño de los bordes del elemento se corta y no es visible;
• auto - funciona igual que scroll. Sin embargo, las barras de desplazamiento solo aparecen cuando el contenido sobrepasa los bordes del elemento.

Nota

El contenido desbordado no afecta la geometría de los demás elementos.

visible

Si la propiedad overflow no está establecida, su valor predeterminado es visible. Esto significa que el contenido se mostrará fuera de los bordes del elemento. En el ejemplo, los bordes de la caja están resaltados en darkblue, y la caja tiene propiedades fijas de width y height.

scroll

Podemos visualizar todo el contenido del elemento utilizando una barra de desplazamiento. Observa el siguiente ejemplo:

hidden

Todo el contenido desbordado estará oculto y el usuario nunca lo verá. Generalmente, es útil solo cuando se necesitan desarrollar algunos efectos decorativos.