HTML




overflow

La propiedad overflow en CSS define c贸mo el contenido de un elemento se comporta cuando supera el espacio disponible de su contenedor. Su funci贸n es crucial para el dise帽o y la organizaci贸n visual en las interfaces web, ya que permite decidir si el contenido excedente debe mostrarse, ocultarse o desplazarse mediante barras de scroll.

¿Para qu茅 sirve overflow?

Overflow es fundamental en dise帽os donde el tama帽o del contenedor es fijo o limitado y existe la posibilidad de que el contenido sea m谩s grande que el espacio disponible. Esta propiedad permite:

  • Evitar desbordamientos que afecten la est茅tica y funcionalidad de la p谩gina.
  • Controlar la visibilidad de contenido en funci贸n de la usabilidad deseada.
  • Permitir barras de desplazamiento para una navegaci贸n intuitiva cuando el contenido es extenso.
Cu谩ndo usar overflow

La propiedad overflow se utiliza frecuentemente en los siguientes casos:

  • Cuando un elemento tiene un tama帽o fijo y no puede ajustarse al contenido.
  • Para ocultar contenido desbordado en situaciones donde la visualizaci贸n completa no es esencial.
  • En dise帽os responsivos, donde el tama帽o del contenedor puede cambiar seg煤n el dispositivo.
Valores de overflow

Existen varios valores que se pueden asignar a la propiedad overflow, cada uno con un comportamiento espec铆fico:

  • visible: Muestra el contenido que se desborda fuera del contenedor, sin recortes.
  • hidden: Oculta cualquier contenido que se desborde, elimin谩ndolo visualmente.
  • scroll: Muestra barras de desplazamiento siempre, incluso si no es necesario.
  • auto: Muestra una barra de desplazamiento solo si el contenido desborda.
Ejemplo b谩sico de uso

Este ejemplo muestra un contenedor con la propiedad overflow: auto para permitir el desplazamiento si el contenido es mayor al contenedor: 

                    <div style="width: 200px; height: 100px; overflow: auto;">
    Contenido extenso dentro del contenedor que se desborda y requiere desplazamiento para verlo completo.
</div>


Ejemplos Visuales

Ejemplo de overflow: visible

Con overflow: visible, el contenido que sobrepasa el contenedor se muestra completamente, extendi茅ndose fuera de los l铆mites del contenedor.

Texto de ejemplo que se desborda fuera del contenedor para mostrar overflow visible. Este texto contin煤a fuera del l铆mite del contenedor.




Ejemplo de overflow: hidden

Con overflow: hidden, el contenido que se desborda es recortado en los l铆mites del contenedor, sin mostrar barras de desplazamiento.

Texto de ejemplo que se desborda fuera del contenedor, pero con overflow: hidden no se muestra el contenido que excede el l铆mite del contenedor.


Ejemplo de overflow: scroll

Con overflow: scroll, se muestran barras de desplazamiento para todo el contenido, independientemente de si es necesario desplazarse.

Texto de ejemplo que se desborda fuera del contenedor. Con overflow: scroll, se muestran barras de desplazamiento, incluso si el contenido apenas sobresale.


Ejemplo de overflow: auto

Con overflow: auto, las barras de desplazamiento solo aparecen cuando el contenido sobrepasa el tama帽o del contenedor.

Texto de ejemplo que se desborda fuera del contenedor. Con overflow: auto, solo aparecen barras de desplazamiento cuando es necesario.



overflow: visible

La propiedad overflow: visible en CSS controla el comportamiento del contenido que sobrepasa el tama帽o del contenedor, permitiendo que se extienda fuera de los l铆mites del mismo sin ser recortado.

¿Para qu茅 sirve? Esta propiedad es 煤til cuando queremos que el contenido se muestre completamente, incluso si se desborda del contenedor. Esto suele ser relevante en dise帽os donde el contenido adicional fuera del contenedor aporta valor o se integra con otros elementos del dise帽o.

¿Cu谩ndo usar overflow: visible? Se utiliza generalmente cuando:

  • El contenido que se desborda es parte esencial de la presentaci贸n visual y debe mostrarse completo, como en el caso de elementos gr谩ficos decorativos.
  • No se requiere restricci贸n o recorte de contenido en el dise帽o y es importante que los elementos sobresalgan libremente del contenedor.
  • Deseas evitar barras de desplazamiento o recortes, permitiendo que otros elementos en la p谩gina interact煤en visualmente con el contenido.

Limitaciones: Aunque puede ser 煤til, overflow: visible no es adecuado cuando el contenido desbordado debe mantenerse dentro de los l铆mites de un dise帽o m谩s estructurado, o cuando el desbordamiento puede romper el flujo visual de la p谩gina.


Ejemplo Visual de overflow: visible

En este ejemplo, el contenedor tiene overflow: visible, permitiendo que el contenido se extienda fuera de los l铆mites del contenedor sin recortarse.

Contenido desbordado - visible fuera del contenedor

Nota: El texto "Contenido desbordado - visible fuera del contenedor" aparece fuera del contenedor debido al uso de overflow: visible.



overflow: hidden

La propiedad overflow: hidden en CSS se utiliza para ocultar cualquier contenido que desborde el tama帽o del contenedor. En lugar de mostrar el contenido fuera del contenedor o permitir que se desplace, este valor recorta el contenido desbordado, elimin谩ndolo visualmente. Esto es 煤til cuando se quiere mantener un dise帽o limpio sin que el contenido sobrepase el 谩rea visible de un contenedor.

Este comportamiento es 煤til cuando se trabaja con dise帽os responsivos o cuando se desea mantener un control preciso sobre el 谩rea visible de un elemento sin que se muestren barras de desplazamiento o contenido sobrante. Es uno de los valores m谩s comunes cuando se quiere evitar el desbordamiento no deseado.



Ejemplo Visual de overflow: hidden

En este ejemplo, el contenido de la caja se desborda, pero gracias a la propiedad overflow: hidden, cualquier parte que se desborde fuera del contenedor ser谩 recortada y no visible.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur praesentium nam aspernatur, a laboriosam dolorem vel nesciunt ea dolorum assumenda, quae, culpa error voluptate esse. Ullam dolores ea nihil esse?



overflow: scroll

La propiedad overflow: scroll fuerza la aparici贸n de barras de desplazamiento en el contenedor, independientemente de si el contenido excede el tama帽o del contenedor o no. Esto es 煤til cuando se quiere garantizar que las barras de desplazamiento est茅n siempre visibles, incluso si no son necesarias.

Este valor es particularmente 煤til cuando se requiere una interfaz de usuario consistente y predecible, o cuando se quiere dar la sensaci贸n de que el contenido puede desplazarse, aunque no sea necesario en ese momento. 

                    <div style="width: 300px; height: 150px; overflow: scroll; background-color: #f8f9fa;">
                        <div style="width: 500px; height: 200px; background-color: #ff6347;"></div>
                    </div>


Ejemplo Visual de overflow: scroll

En este ejemplo, el contenedor siempre mostrar谩 las barras de desplazamiento, incluso si el contenido no se desborda.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem, recusandae facilis in fugit inventore est harum, aspernatur vel doloremque perferendis id earum, odio omnis autem. Vero eaque expedita odit eius?



overflow: auto

La propiedad overflow: auto muestra una barra de desplazamiento solo cuando el contenido desborda el contenedor. Si el contenido no excede el tama帽o del contenedor, las barras de desplazamiento no ser谩n visibles.

Este valor es 煤til para lograr un comportamiento din谩mico donde se agregan barras de desplazamiento solo cuando son necesarias, manteniendo la interfaz limpia y sin distracciones cuando no se requieren. 

                    <div style="width: 300px; height: 150px; overflow: auto; background-color: #f8f9fa;">
                        <div style="width: 500px; height: 200px; background-color: #ff6347;"></div>
                    </div>


Ejemplo Visual de overflow: auto

En este ejemplo, las barras de desplazamiento aparecen solo cuando el contenido excede el tama帽o del contenedor.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odio repudiandae accusantium dolor accusamus unde animi placeat expedita natus magnam nemo reiciendis, obcaecati assumenda pariatur, quidem doloribus sit. Accusamus, iste



overflow-x

La propiedad overflow-x controla el desbordamiento horizontal del contenido. Esto significa que permite definir c贸mo se maneja el contenido que se desborda a lo largo del eje horizontal (izquierda a derecha). Puedes especificar si debe recortarse, mostrar una barra de desplazamiento o permitir que el contenido sea visible.

Es 煤til cuando necesitas manejar espec铆ficamente el desbordamiento horizontal sin afectar el desbordamiento vertical, lo que permite tener un control m谩s preciso sobre el layout. 

                    <div style="width: 500px; height: 100px; overflow-x: auto; background-color: #f8f9fa;">
                        <div style="width: 700px; height: 100px; background-color: #ff6347;"></div>
                    </div>


Ejemplo Visual de overflow-x

En este ejemplo, el desbordamiento horizontal del contenido es controlado por la propiedad overflow-x, mostrando una barra de desplazamiento solo cuando el contenido es m谩s ancho que el contenedor.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur neque architecto ullam vero cupiditate quas, nemo debitis ut suscipit quod. Dolorem vitae et fugiat ab soluta sit eaque doloribus possimus!



overflow-y

La propiedad overflow-y permite controlar el desbordamiento vertical del contenido, es decir, el desbordamiento que ocurre a lo largo del eje Y (de arriba a abajo). Esta propiedad te permite manejar c贸mo se ve el contenido que excede el tama帽o del contenedor en direcci贸n vertical.

De forma similar a overflow-x, puedes usar overflow-y para especificar si el contenido debe ser recortado, desplazado o visible. Es muy 煤til para manejar contenidos con altura variable sin afectar otras dimensiones del contenedor. 

                    <div style="width: 300px; height: 150px; overflow-y: auto; background-color: #f8f9fa;">
                        <div style="width: 300px; height: 300px; background-color: #ff6347;"></div>
                    </div>

Ejemplo Visual de overflow-y

En este ejemplo, el desbordamiento vertical del contenido es controlado por la propiedad overflow-y, mostrando una barra de desplazamiento solo cuando el contenido excede el contenedor en la direcci贸n vertical.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam culpa blanditiis modi amet at minus qui nostrum esse, placeat atque magni deleniti delectus cum sequi, obcaecati alias odio id doloremque.