overflow-css

La propiedad overflow establece que ocurrirá si el contenido de un elemento excede su área.

La propiedad overflow sirve principalmente para poder ubicar mucho contenido en un bloque que debe ser pequeño porque estropea el diseño o no lo queremos poner por otra razón. Con la propiedad overflow podremos incluirlo en un sitio más pequeño del que ocupa ya que limita el div a un alto y/o ancho preestablecido y todo el contenido sobrante en vez de seguir desplazandose hacia abajo de la página, se queda en la capa, donde podemos manejarlo mediante la barra de scroll (overflow: scroll;) o que aparezca solo cuando el texto ocupe más espacio que el div (overflow: auto;) sin que afecte al diseño de la página lo más mínimo.


Un ejemplo con overflow: auto (la barra de scroll solo aparecerá cuando el texto supere la máxima altura preestablecida (en este caso 400px):

#content { overflow:auto; height:400px; }

Quedaría así:

overflow-css2

Hay varios valores para la propiedad overflow, aquí se listan los posibles:

Valor Descripción
visible Por defecto. El contenido no se recortado. Se renderizará fuera del elemento.
hidden El contenido oculto se recorta pero el navegador no mostrará la barra de scroll, que quedará oculta.
scroll El contenido se recorta y el navegador mostrará una barra para ver el resto del contenido.
auto Si el contenido se recorta el navegador mostrará una barra para ver el resto del contenido.

Finalmente os mostramos un ejemplo de su funcionamiento.

Vía | W3C Schools