Propiedad CSS overflow-x — Valores y ejemplos

La propiedad overflow-x controla lo que ocurre con el contenido que se extiende más allá de los bordes izquierdo y derecho de una caja. Puedes dejar que se desborde, recortarlo silenciosamente o añadir una barra de desplazamiento horizontal.

overflow-x forma parte del shorthand CSS overflow y funciona en conjunto con overflow-y, que gestiona el desbordamiento vertical.

Información

Si overflow-y está configurado como hidden, scroll o auto, y overflow-x conserva su valor predeterminado visible, los navegadores calculan automáticamente overflow-x como auto. Un valor de visible no puede coexistir con un valor distinto de visible en el eje perpendicular.

Valor inicial	`visible`
Se aplica a	Contenedores de bloque, contenedores flex y contenedores grid.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	`object.style.overflowX = "scroll";`

Sintaxis

overflow-x: visible | hidden | scroll | auto | clip | initial | inherit;

Valores

Valor	Descripción
`visible`	El contenido no se recorta. Se renderiza fuera de los bordes izquierdo y derecho del padding box. Este es el valor predeterminado.
`hidden`	El contenido se recorta en los bordes del padding box. No se muestra ninguna barra de desplazamiento y el contenido recortado no es accesible.
`scroll`	El contenido se recorta y siempre se muestra una barra de desplazamiento horizontal, incluso si el contenido cabe.
`auto`	El contenido se recorta solo cuando desborda. La barra de desplazamiento aparece únicamente cuando es necesaria. Es preferible a `scroll` en la mayoría de los casos.
`clip`	Similar a `hidden`, pero también impide el desplazamiento programático mediante JavaScript (`scrollLeft`, `scroll()`). Compatible con navegadores modernos.
`initial`	Restablece la propiedad a su valor predeterminado (`visible`).
`inherit`	Hereda el valor del elemento padre.

Cuándo usar cada valor

visible — el valor predeterminado. Úsalo cuando el desbordamiento sea intencional, por ejemplo un tooltip o un desplegable que debe extenderse más allá de su contenedor.
hidden — úsalo para ocultar el desbordamiento en componentes de diseño (tarjetas de imagen, sliders) donde el contenido recortado nunca deba ser alcanzado. Ten en cuenta que cualquier contenido cortado resulta inaccesible para usuarios de teclado y lectores de pantalla.
scroll — úsalo cuando siempre quieras una barra de desplazamiento visible, como en vistas de comparación en paralelo, para que el diseño no se desplace cuando varíe la longitud del contenido.
auto — la opción más habitual para contenedores responsivos. La barra de desplazamiento aparece solo cuando el contenido realmente desborda, manteniendo el diseño limpio.
clip — úsalo cuando quieras el mismo recorte estricto que hidden pero también necesites evitar que JavaScript desplace el elemento programáticamente (útil en ciertas técnicas de animación).

Patrones prácticos

Un caso de uso habitual es un contenedor de desplazamiento horizontal para contenido ancho, como tablas de datos o bloques de código. Combina overflow-x: auto con white-space: nowrap (ver white-space) para mantener el contenido en una sola línea:

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

Para que el elipsis de text-overflow (…) funcione, necesitas overflow-x: hidden (o overflow: hidden) junto con white-space: nowrap:

.truncate {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Ejemplos

overflow-x: scroll

El contenedor tiene solo 40 px de ancho. Con scroll, siempre se muestra una barra de desplazamiento horizontal para que los usuarios puedan ver el resto del texto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Pruébalo tú mismo »

overflow-x: visible

Con visible, el texto se renderiza fuera de la caja estrecha y se superpone al contenido circundante. Este es el comportamiento predeterminado del navegador.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Pruébalo tú mismo »

overflow-x: hidden

Con hidden, el texto se recorta silenciosamente en el borde derecho. No se muestra ninguna barra de desplazamiento y la parte recortada no puede alcanzarse.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Pruébalo tú mismo »

overflow-x: auto

Con auto, la barra de desplazamiento aparece solo cuando el contenido realmente desborda — la opción más limpia para la mayoría de los diseños.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Todos los valores comparados

El siguiente ejemplo muestra los cuatro valores principales en paralelo para que puedas comparar su efecto visual de un vistazo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Propiedades relacionadas

overflow — shorthand que establece overflow-x y overflow-y a la vez.
overflow-y — controla el comportamiento del desbordamiento vertical (arriba/abajo).
overflow-wrap — especifica si el navegador puede romper palabras largas para evitar el desbordamiento horizontal.
text-overflow — controla cómo se indica al usuario el texto desbordado (por ejemplo, con puntos suspensivos).
white-space — determina si el texto se ajusta; combinar white-space: nowrap con overflow-x es un patrón habitual.

Práctica

¿Qué valor de overflow-x siempre muestra una barra de desplazamiento horizontal, incluso cuando el contenido cabe?

visibleautoscrollhidden