CSS Min y Max

Las propiedades min y max limitan el tamaño de los elementos. Garantizan que un elemento no sea demasiado pequeño ni demasiado grande, incluso si cambia el tamaño del contenedor padre.

Propiedades disponibles

Las configuraciones min-width, max-width, min-height y max-height permiten un ajuste fino del diseño. Se usan con frecuencia en la creación de diseños responsivos.

Propiedad	Descripción
min-width	Define el ancho mínimo por debajo del cual el elemento no puede reducirse.
max-width	Define el ancho máximo por encima del cual el elemento no puede crecer.
min-height	Define la altura mínima por debajo de la cual el elemento no puede reducirse.
max-height	Define la altura máxima por encima de la cual el elemento no puede crecer.

Ejemplo con restricciones fijas

En el siguiente ejemplo, la caja tiene un ancho y una altura mínimos y máximos definidos.

La caja roja puede tener un ancho entre 200 y 400 píxeles, y una altura entre 100 y 200 píxeles.

Uso responsivo

Los valores min y max combinados con anchos porcentuales son excelentes para crear diseños responsivos.

Consejos para usar min y max

Las propiedades min y max ayudan a evitar que los elementos se reduzcan o estiren de forma extrema.

Usa min-width en móviles para evitar que el texto se divida en columnas demasiado estrechas.
Max-width ayuda a mantener el contenido legible incluso en pantallas grandes.
Combina valores min y max con anchos porcentuales para lograr un diseño perfectamente responsivo.