▷La propiedad overflow en CSS

« Anterior Siguiente »

Esta es la lección en la que conoceremos y aprenderemos a utilizar la propiedad overflow es una propiedad CSS muy importante para el control de contenido excedente de elementos y contenedores. Mediante un poco de teoría y varios ejemplos prácticos te ayudaré a entender qué es, para qué sirve y cómo es que funciona esta propiedad.

Para qué sirve la propiedad overflow de CSS

Para responder la pregunta quiero que te pongas a pensar en la infinidad de posibilidades que tenemos para dimensionar un elemento o contenedor, son tantas posibilidades que en ocasiones existen elementos hijos que exceden la dimensión de sus elementos padre.

Entonces ¿Qué sucede cuando por alguna razón el elemento hijo sobrepasa los bordes de su elemento padre? Pues simplemente se desborda, se excede y es poco práctico, es ahí donde entra en juego el poder de la propiedad overflow.

Así se ve cuando el elemento hijo excede las dimensiones del elemento padre:

Overflow permite mantener visible el excedente, ocultar, o crear barras de desplazamiento sobre el contenedor del que excede.

Valores para la propiedad overflow

visible.- es el valor por defecto y hace que todo sea visible, aunque el contenido esté desbordado.
hidden.- hace que el contenido excedente se oculte.
scroll.- El contenido ingresa al contenedor sin desbordarse, pero aparecen las barras de desplazamiento horizontal y vertical para visualizar el contenido.
auto.- automáticamente aparecen las barras de desplazamiento siempre y cuando sean necesarias, el contenido no se desborda, ingresa en su contenedor.
inherit.- hereda el estilo del elemento padre.

Ejemplos de overflow en CSS

Código HTML

<div class="contenedor">
  <p class="contenido">Este es un párrafo para probar la propiedad Overflow de CSS, por ello necesitamos que este párrafo sobrepase los límites del contendor en el que se encuentra, de tal manera que podamos observar como es que los valores de overflow influyen en el comportamiento de los contenidos excedentes, ya sabemos cuáles son los valores y cómo estos afectan, pero no está demás verlos visualmente y en tu caso aplícalo en tu proyecto para explorar de primera mano...</p>

Código CSS

div.contenedor {
  width:200px;
  height: 200px;
  margin:40px;
  padding: 15px;
  background-color:#76e37f;
  border: 1px solid #aaa;
  overflow:scroll;
}

Resultado de propiedad overflow con valor scroll:

Te recomendamos leer: Posicionamiento en CSS | Cómo posicionar elementos, tipos y ejemplos

Observa cómo aparecen las barras de desplazamiento tanto en la parte inferior como al lado derecho del contenedor, de tal manera que ahora se puede deslizar para descubrir el contenido que no quepa en el contenedor.

Resultado cuando se aplica otros valores:

Ahora veamos los resultados obtenidos en el mismo ejemplo anterior cuando se aplica otros valores para overflow.

Resultado para overflow:visible;