Descripción
La propiedad overflow de CSS nos permite controlar qué sucede cuando el contenido de un elemento es demasiado grande para caber en su bloque contenedor. Esta propiedad determina si se debe recortar el contenido, agregar barras de desplazamiento o mostrar el contenido que sobresale del contenedor.
Sintaxis
overflow : visible | hidden | scroll | auto | inherit
Valores
- inherit - Hereda el valor de la propiedad overflow del elemento padre.
- visible - El contenido no está recortado y puede ser renderizado fuera de la caja del elemento.
- hidden - El contenido que desborda es recortado y el resto permanece invisible.
- scroll - El contenido es recortado y se agregan barras de desplazamiento, estén o no sean necesarias.
- auto - Depende del navegador, pero generalmente agrega barras de desplazamiento solo cuando son necesarias.
Ejemplo
Veamos un ejemplo práctico de cómo funciona la propiedad overflow. Imaginemos que tenemos un div contenedor con un tamaño fijo y texto que excede sus dimensiones.
.contenedor {
width: 200px;
height: 100px;
border: 2px solid #000;
overflow: auto;
}
.contenido {
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
