CSS | Propiedad Overflow

Overflow permite controlar el desbordamiento de las cajas. Un contenido se desborda cuando la caja que lo contiene es mayor que el contenedor.

Soy la caja 1
overflow; visible;
/* Muestra el contenido desbordado. Visible es el valor por defecto; sería equivalente a no poner nada. */

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod veniam magni totam incidunt quaerat? Voluptatibus rem voluptatum perspiciatis ad illo, veritatis repellat natus illum numquam, incidunt ab quos temporibus ratione?

Porro adipisci asperiores perspiciatis in, veniam, ipsam dignissimos a aliquam sunt rerum quo amet. Magni aspernatur quo explicabo culpa temporibus minus perferendis dicta dolores. Saepe aliquam quae cum nobis cumque!

Soy la caja 2
overflow; hidden;
/* Oculta el contenido desbordado. */

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod veniam magni totam incidunt quaerat? Voluptatibus rem voluptatum perspiciatis ad illo, veritatis repellat natus illum numquam, incidunt ab quos temporibus ratione?

Porro adipisci asperiores perspiciatis in, veniam, ipsam dignissimos a aliquam sunt rerum quo amet. Magni aspernatur quo explicabo culpa temporibus minus perferendis dicta dolores. Saepe aliquam quae cum nobis cumque!

Soy la caja 3
overflow: scroll;
/* Muestra las barras de desplazamientop incluso si no son necesarias. */

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod veniam magni totam incidunt quaerat? Voluptatibus rem voluptatum perspiciatis ad illo, veritatis repellat natus illum numquam, incidunt ab quos temporibus ratione?

Porro adipisci asperiores perspiciatis in, veniam, ipsam dignissimos a aliquam sunt rerum quo amet. Magni aspernatur quo explicabo culpa temporibus minus perferendis dicta dolores. Saepe aliquam quae cum nobis cumque!

Soy la caja 4
overflow-y: scroll;
/* Muestra la barra de desplazamiento vertical incluso si no es necesaria. */

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod veniam magni totam incidunt quaerat? Voluptatibus rem voluptatum perspiciatis ad illo, veritatis repellat natus illum numquam, incidunt ab quos temporibus ratione?

Porro adipisci asperiores perspiciatis in, veniam, ipsam dignissimos a aliquam sunt rerum quo amet. Magni aspernatur quo explicabo culpa temporibus minus perferendis dicta dolores. Saepe aliquam quae cum nobis cumque!

Soy la caja 5
overflow-y: auto;
/* Muestra la barra de desplazamiento vertical solo si es necesaria. */

Porro adipisci asperiores perspiciatis in, veniam, ipsam dignissimos a aliquam sunt rerum quo amet.