La propiedad overflow controla lo que sucede con el contenido que es demasiado grande para caber en un área. Dicha propiedad especifica si recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el área especificada.

Los valores que puede tener son los siguientes:

  • visible: por defecto. El desbordamiento no se recorta. El contenido se muestra fuera de la caja del elemento.
  • hidden: El desbordamiento se recorta y el resto del contenido será invisible
  • scroll: El desbordamiento se recorta y se agrega una barra de desplazamiento para ver el resto del contenido
  • auto: Similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario

Nota: la propiedad overflow solo funciona para elementos de bloque con una altura específica.

Ejm

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

El resultado sería el siguiente:

overflow-x y overflow-y

Las propiedades overflow-x y overflow-y especifican si cambiar el desbordamiento de contenido solo horizontal o verticalmente (o ambos):

  • overflow-x especifica qué hacer con los bordes izquierdo/derecho del contenido.
  • overflow-y especifica qué hacer con los bordes superior/inferior del contenido.

Ejm

div {
  overflow-x: hidden; /* Oculta el scroll horizontal */
  overflow-y: scroll; /* Añade scroll verticlaAdd vertical scrollbar */
}

Resumen

Property Description
overflow Especifica qué sucede si el contenido desborda el cuadro de un elemento.
overflow-wrap Especifica si el navegador puede o no romper líneas con palabras largas, si desbordan su contenedor
overflow-x Especifica qué hacer con los bordes izquierdo/derecho del contenido si se desborda el área de contenido del elemento.
overflow-y Especifica qué hacer con los bordes superior/inferior del contenido si se desborda el área de contenido del elemento.