Propiedad CSS min-width

La propiedad min-width establece el ancho mínimo de un elemento. Impide que el valor de la propiedad width se reduzca por debajo del valor que se le asigna a min-width, sin importar qué tan estrecho sea el espacio disponible.

Esta página explica qué hace min-width, cómo interactúa con width y max-width, los valores que acepta (incluidas las palabras clave min-content/max-content/fit-content) y el problema común con Flexbox que min-width resuelve.

Cómo interactúa min-width con width y max-width

Cuando usas min-width junto con las propiedades width y max-width, min-width actúa como un límite inferior. El navegador calcula el ancho y luego lo fija dentro del rango min-width … max-width:

Si width es menor que min-width, el elemento se amplía hasta min-width.
Si width es mayor que max-width, el elemento se reduce hasta max-width.

En otras palabras, min-width prevalece sobre un width menor, y max-width prevalece sobre un min-width mayor — min-width siempre tiene prioridad cuando los dos entran en conflicto. Esto es lo que permite que los elementos sigan siendo legibles y a la vez responsivos: el elemento puede crecer en pantallas anchas pero nunca colapsa por debajo de un tamaño utilizable.

Un uso práctico común es evitar que una columna, tarjeta o botón se vuelva demasiado estrecho dentro de un diseño Flexbox o de cuadrícula, donde de otro modo los elementos secundarios se encogerían para ajustarse.

Información

Los valores de longitud negativos no son válidos — min-width acepta únicamente 0 o una longitud/porcentaje positiva.

Valor inicial	0
Se aplica a	Todos los elementos, excepto los elementos en línea no reemplazados, las filas de tabla y los grupos de filas.
Heredado	No.
Animable	Sí. El ancho es animable.
Versión	CSS2
Sintaxis DOM	object.style.minWidth = "200px";

Sintaxis

min-width: <length> | <percentage> | min-content | max-content | fit-content | auto | initial | inherit;

La propiedad acepta una longitud CSS (px, pt, em, rem, etc.), un porcentaje del bloque contenedor, o una de las palabras clave de tamaño intrínseco descritas en la tabla de Valores a continuación.

Ejemplos

Valor en porcentaje

Cuando min-width es un porcentaje, se resuelve en función del ancho del bloque contenedor. Aquí, width: 10px se sobrescribe porque el min-width del 70% es mayor, de modo que el elemento se amplía al 70% de su padre:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Valor de longitud fija

En este ejemplo se aplica un min-width de 10cm a un elemento inline-block. Se compara con un span simple que tiene min-width: 0, para que puedas ver cómo el límite inferior obliga al segundo cuadro a mantenerse al menos 10cm de ancho aunque su texto sea corto:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>

Pruébalo tú mismo »

El problema de min-width: 0 en Flexbox

Por defecto, un elemento flex no puede reducirse por debajo del tamaño de su contenido — su min-width implícito es auto, no 0. Por eso las palabras largas, bloques de código o elementos <pre> dentro de un contenedor flex pueden desbordarse y estirar todo el diseño en lugar de ajustarse o desplazarse.

La solución es establecer min-width: 0 explícitamente en el elemento flex para que pueda reducirse por debajo del tamaño de su contenido:

.flex-item {
  min-width: 0; /* allow this item to shrink below its content width */
  overflow: hidden; /* or use overflow-x: auto for scrollable content */
}

Consulta overflow y flex para más información sobre cómo controlar el comportamiento del contenido reducido.

Valores

Valor	Descripción	Pruébalo
`length`	Define un ancho mínimo en `px`, `pt`, `cm`, `em`, etc. El valor predeterminado es `0`.	Pruébalo »
`%`	Establece el ancho mínimo como porcentaje del ancho del elemento contenedor.	Pruébalo »
`min-content`	El ancho más pequeño que puede tener el contenido sin desbordarse (p. ej., la palabra más larga).
`max-content`	El ancho que tendría el contenido si nunca se ajustara a la línea siguiente.
`fit-content`	Usa el espacio disponible, pero nunca más que `max-content`.
`auto`	El valor predeterminado — se resuelve como `0` para la mayoría de los elementos, pero como el tamaño del contenido para los elementos flex.
`initial`	Hace que la propiedad use su valor predeterminado (`0`).	Pruébalo »
`inherit`	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

width — establece el ancho preferido que min-width limita.
max-width — establece el límite superior del rango de ancho.
min-height — el equivalente vertical de min-width.
box-sizing — controla si el relleno y los bordes se contabilizan en el ancho.

Práctica

¿Cuál es la funcionalidad de la propiedad 'min-width' en CSS?

Permite definir el ancho mínimo de un elementoPermite definir el ancho máximo de un elementoPermite definir la altura mínima de un elementoAyuda a evitar que los valores de la propiedad 'width' sean menores que el valor especificadoAyuda a rotar un elemento