Supongo que te ha pasado alguna vez que diseñas un cuadro de texto o un contenedor perfecto, pero es como si el contenido tuviese vida propia y empieza a salirse por los lados, arruinando todo tu diseño. Es frustrante, lo sé porque me ha pasado. Pero no te preocupes, porque quiero contarte que para eso existe la propiedad overflow en CSS y, con ella, puedes decidir qué hacer cuando el contenido de un elemento HTML se desborda de su contenedor.

Así que toma nota, porque en este artículo te voy a explicar qué es overflow en CSS, para qué sirve, cómo usarlo y, lo más importante, cómo puede salvarte en situaciones complicadas de diseño.

¿Qué encontrarás en este post?

¿Qué es overflow en CSS?

Overflow en CSS es la propiedad encargada de manejar el contenido cuando este se extiende más allá de las dimensiones de su contenedor. En otras palabras, te permite controlar qué ocurre cuando el contenido desborda el área que debería ocupar. ¿Y qué quiere desbordar en este contexto? Significa que hay más contenido del que el contenedor puede mostrar sin cambiar su tamaño.

Sucede que, por defecto, los navegadores suelen dejar que el contenido se salga del contenedor, pero con esta propiedad puedes tomar el control y decidir si quieres ocultar ese contenido, permitir que se desplace con un scroll o simplemente dejarlo como está.

¿Para qué sirve overflow en CSS?

Como te contaba, el principal uso de overflow en CSS es manejar el desbordamiento del contenido de manera eficiente, con el propósito de mantener tus diseños limpios y funcionales. Por eso, estos son algunos de sus usos más comunes:

Crear barras de desplazamiento: Cuando el contenido es más grande que el contenedor, puedes añadir scroll para que el usuario pueda verlo todo.
Evitar diseños rotos: Esta propiedad te ayuda a evitar que el contenido sobresalga de manera antiestética, de manera que puedes mantener una coherencia visual y mantener una interfaz agradable.
Controlar la visibilidad: Puedes optar por ocultar el contenido que se desborda si no es esencial para la experiencia del usuario.
Diseños responsivos: En combinaciones con otras propiedades como max-width, overflow te ayuda a mantener un diseño adaptable a diferentes dispositivos.

Sintaxis de overflow en CSS

La sintaxis de esta propiedad es sencilla y se aplica directamente al contenedor del elemento que deseas controlar, de la siguiente manera:

Valores de overflow

Aquí, podemos aplicar diferentes valores, cada uno tiene un propósito diferente:

elemento {
  overflow: valor;
}

visible: Este es el valor por defecto, donde el contenido se desborda del contenedor sin ninguna restricción.
hidden: Oculta el contenido que se sale del contenedor.
scroll: Añade barras de desplazamiento, incluso si no son necesarias.
auto: Muestra barras de desplazamiento sólo cuando el contenido se desborda.
clip: En el CSS moderno, este valor es similar a hidden, pero sin crear un área de desplazamiento.

Ejemplo de overflow en CSS

Supongamos que tienes un contenedor para mostrar comentarios, pero el texto del usuario puede ser más largo de lo esperado. Aquí puedes usar la propiedad para mantener el diseño bajo control:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Overflow</title>
  <style>
    .contenedor {
      width: 300px;
      height: 150px;
      border: 1px solid #ccc;
      overflow: auto;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="contenedor">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet augue...
  </div>
</body>
</html>

En este ejemplo, usamos overflow: auto para mostrar barras de desplazamiento sólo cuando el texto excede las dimensiones del contenedor. Con el control visual, el contenedor mantiene su tamaño definido y el contenido se organiza de forma ordenada.

Diferencia entre overflow-x y overflow-y

Si necesitas un mayor control para manejar el desbordamiento, CSS te permite usar overflow-x y overflow-y para controlar los ejes horizontal y vertical por separado, como en el siguiente ejemplo:

.elemento {
  overflow-x: scroll; /* Solo barra horizontal */
  overflow-y: hidden; /* Sin barra vertical */
}

Esto es útil para situaciones como tablas con muchos datos o galerías horizontales.

Consejos para usar overflow en CSS

Ahora, me gustaría compartir contigo algunos consejos que, desde mi experiencia, puedo decir que son muy útiles:

Planifica las dimensiones de tus contenedores: Es muy importante que siempre definas un ancho y un alto claro para evitar problemas innecesarios.
Usa auto con moderación: Aunque es práctico, asegúrate de que las barras de desplazamiento no entorpezcan la experiencia del usuario.
Combínalo con propiedades modernas: Usar herramientas como clip-path o flexbox puede complementar la propiedad si quieres conseguir un diseño más robusto.
Prueba en dispositivos móviles: Resulta esencial que te asegures de que el desbordamiento no cause problemas en pantallas pequeñas, así que realiza pruebas para ver cómo funciona en los móviles.

Ahora que has llegado hasta aquí, ¿qué te parece esta propiedad? Yo creo que, aunque overflow en CSS puede parecer sencilla, es una herramienta fundamental para cualquier desarrollador web. Así que ya sabes que, con ella, puedes mantener tus diseños bajo control, evitar errores visuales y mejorar la experiencia del usuario.

Si quieres continuar aprendiendo hasta convertirte en un maestro del diseño y desarrollo web, el Bootcamp en Desarrollo Web de KeepCoding es tu oportunidad perfecta. En este curso, te enseñaré desde lo básico hasta las técnicas más avanzadas, para que en poco tiempo puedas dominar las herramientas que necesitas e iniciar una nueva carrera en el sector IT.

¡Un futuro lleno de oportunidades te está esperando!