Docs ejecutables de CSS: Overflow en CSS

Q: ¿Qué diferencia hay entre overflow auto y scroll?

scroll siempre reserva las barras de desplazamiento, aunque el contenido quepa. auto muestra una barra solo cuando el contenido es más grande que la caja, que es lo que normalmente quieres.

Q: ¿Cómo hago que un div tenga scroll?

Limita su tamaño y permite el desplazamiento: max-height: 300px; overflow-y: auto;. Sin un límite de height o max-height, el div crece con su contenido y nunca se desborda.

Q: ¿Por qué overflow-x: hidden también agrega una barra vertical?

Si un eje es hidden, scroll o auto, un valor visible en el otro eje se calcula como auto. Usa overflow-x: clip, que no crea un contenedor de desplazamiento y deja visible el otro eje.

Q: ¿Cómo agrego puntos suspensivos (...) al texto que se desborda?

Para una línea: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; en un elemento con ancho limitado. Para varias líneas, usa display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Qué hace overflow

Cuando el contenido es más grande que su caja (una altura fija, una palabra larga, una tabla ancha), se desborda. La propiedad overflow decide qué pasa con lo que sobra:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Valor	Lo que ves	Contenedor de desplazamiento
`visible` (por defecto)	El contenido sale de la caja y se superpone a lo que sigue	No
`hidden`	Recortado en el borde del padding, sin barras (un script todavía puede desplazarlo)	Sí
`clip`	Recortado, y sin ningún desplazamiento, ni siquiera por script	No
`scroll`	Siempre muestra barras de desplazamiento, aunque el contenido quepa	Sí
`auto`	Barras de desplazamiento solo cuando el contenido no cabe	Sí

En macOS y en los teléfonos las barras de desplazamiento se superponen al contenido y se desvanecen, así que scroll y auto pueden verse igual hasta que te desplazas.

Crear una caja con scroll

Una caja solo se desborda si algo limita su tamaño. Una height o una max-height, más overflow-y: auto, convierten una lista larga en un panel con desplazamiento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

Aquí max-height es mejor que height: una lista corta sigue siendo corta y solo se desplaza una lista larga. Una región con scroll que no tiene contenido enfocable dentro debería llevar tabindex="0" para que los usuarios de teclado también puedan desplazarla.

overflow-x y overflow-y

Los dos ejes se pueden definir por separado. El uso común es una tabla ancha que se desplaza hacia los lados dentro de su contenedor en lugar de ensanchar toda la página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Una regla para recordar: si un eje es hidden, scroll o auto, un valor visible en el otro eje pasa a ser auto. Así, overflow-x: hidden solo puede darte una barra vertical inesperada. overflow-x: clip no tiene ese efecto:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Cortar texto con puntos suspensivos

text-overflow: ellipsis reemplaza el final recortado de una línea por "…". Necesita tres cosas a la vez: un ancho limitado, texto que no pueda pasar a otra línea y el desbordamiento oculto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

El line clamp con prefijo -webkit- funciona en Chrome, Firefox y Safari. Los lectores de pantalla siguen leyendo el texto completo, así que para ellos las palabras recortadas no se pierden.

Efectos secundarios de overflow

Poner overflow en cualquier valor distinto de visible o clip cambia algo más que el recorte:

Contiene los floats y los márgenes de los hijos. El elemento forma un nuevo contexto de formato de bloque, así que crece para envolver a los hijos con float. display: flow-root hace lo mismo sin recortar nada.
Rompe position: sticky por debajo. Un hijo sticky se queda fijo respecto al contenedor de desplazamiento más cercano; si ese contenedor no se desplaza, nada se queda fijo.
Recorta a los hijos con posición absoluta (cuando el elemento que se desborda también es su bloque contenedor), incluidos menús desplegables y tooltips, y también recorta las sombras de los hijos.

Ocultar la barra de desplazamiento

Puedes mantener una caja con scroll y ocultar su barra con scrollbar-width: none. Úsalo con moderación: sin barra, muchos lectores no se dan cuenta de que hay más contenido. scrollbar-gutter: stable hace lo contrario: reserva el espacio de la barra para que el contenido no se mueva cuando aparece una.

Errores comunes

Esperar un desbordamiento sin límite de tamaño. Una caja sin height ni max-height crece en lugar de desbordarse.
overflow: hidden en body para "arreglar" el scroll horizontal. Busca el elemento que es demasiado ancho (a menudo un width fijo, una URL larga o 100vw con barra de desplazamiento).
Puntos suspensivos sin white-space: nowrap. El texto pasa a otra línea, así que nada se desborda en horizontal y no aparecen los puntos suspensivos.
overflow-x: hidden que crea una barra vertical. Usa clip.
Un menú desplegable cortado por su tarjeta. El overflow: hidden de la tarjeta lo recorta; mueve la regla de overflow o renderiza el menú por fuera.

Preguntas frecuentes

¿Qué hace overflow: hidden?

Recorta el contenido que no cabe dentro de la caja de padding del elemento, sin barras de desplazamiento. La parte oculta todavía se puede alcanzar con un script o enfocando algo que esté dentro.

¿Qué diferencia hay entre overflow auto y scroll?

scroll siempre reserva las barras de desplazamiento, aunque el contenido quepa. auto muestra una barra solo cuando el contenido es más grande que la caja, que es lo que normalmente quieres.

¿Cómo hago que un div tenga scroll?

Limita su tamaño y permite el desplazamiento: max-height: 300px; overflow-y: auto;. Sin un límite de height o max-height, el div crece con su contenido y nunca se desborda.

¿Por qué overflow-x: hidden también agrega una barra vertical?

Si un eje es hidden, scroll o auto, un valor visible en el otro eje se calcula como auto. Usa overflow-x: clip, que no crea un contenedor de desplazamiento y deja visible el otro eje.

¿Cómo agrego puntos suspensivos (...) al texto que se desborda?

Para una línea: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; en un elemento con ancho limitado. Para varias líneas, usa display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Conceptos relacionados