min-width, max-width y la fluidez con tope

min-* y max-* no reemplazan a width/height — los acotan. Son las herramientas para crear diseños que “fluyen pero no se van de las manos”.

El patrón más importante: `width: 100% + max-width`

.contenido {
  width: 100%;        /* fluido: ocupa todo el padre */
  max-width: 720px;   /* tope: jamás supera 720px */
  margin: 0 auto;     /* lo centramos horizontalmente */
}

Lo que hace: en viewports angostos, el contenido ocupa todo el ancho disponible. En viewports anchos, se queda en 720px y se centra. El texto nunca se estira hasta parecer una línea de texto en un periódico.

Es la base del layout responsivo simple — sin media queries, sin cálculos complejos.

min-width — el piso

min-width establece el ancho mínimo. Si el contenido o el contexto harían que el elemento fuera más angosto, min-width lo detiene ahí.

.btn {
  min-width: 120px;   /* el botón nunca es más angosto que 120px */
  padding: 0.75rem 1.5rem;
}

Útil para botones que necesitan un área clickeable mínima, independientemente del largo del texto.

min-height — el piso vertical

min-height funciona igual pero en el eje vertical. Es especialmente útil para tarjetas de una cuadrícula: querés que todas tengan el mismo mínimo visual aunque el contenido varíe.

.tarjeta {
  min-height: 200px;  /* al menos 200px; crece si hay más contenido */
}

Reglas de prioridad cuando hay conflictos

Situación	¿Quién gana?
`width: 500px` + `max-width: 300px`	Gana `max-width` → 300px
`width: 100px` + `min-width: 200px`	Gana `min-width` → 200px
`min-width: 400px` + `max-width: 300px`	Gana `min-width` (ignora `max-width`) → 400px

Mnemotécnica: min = piso (no bajás de ahí), max = techo (no subís de ahí). Si el piso está por encima del techo, el piso manda.

Lo que el validador puede y no puede verificar

El check de este ejercicio verifica max-width: 640px y min-height: 120px — ambos valores fijos en px, completamente predecibles.

width: 100% no se valida automáticamente: computa a px del contenedor del iframe, que varía según el tamaño del panel del sandbox. El validador mostraría un número diferente en cada pantalla. Por eso lo evaluás visualmente: si el contenido se estira con el panel y luego se detiene, el patrón funciona.

Tu turno: aplicá width: 100% y max-width: 640px a .contenido, y min-height: 120px a .tarjeta. Verificá con “Comprobar” y observá el efecto en el preview.

Diagnóstico de errores comunes: si escribís max-width: 640 sin px, el valor no es válido — el computed será "none" y el check falla con actual: "none". Siempre incluí la unidad.