CSS
Explica min-content, max-content, fit-content y el tamaño intrínseco que aportan textos, imágenes y otros contenidos al layout.
El tamaño intrínseco surge del contenido; el extrínseco viene de restricciones externas.
.badge {
inline-size: max-content;
}.card {
inline-size: min-content;
}Se contrae hasta el menor tamaño que evita overflow inevitable. En texto suele acercarse al ancho de la oportunidad de ruptura más larga.
Una palabra o URL sin cortes puede mantener un mínimo grande.
.title {
inline-size: max-content;
}Usa el tamaño ideal sin wrapping voluntario. Puede desbordar el contenedor.
.badge {
inline-size: fit-content;
}Usa una contribución intrínseca limitada por el espacio disponible.
grid-template-columns: fit-content(20rem) 1fr;La función se usa en tracks de Grid y limita el máximo del track. No es idéntica al keyword en todas las propiedades.
.card {
inline-size: 100%;
max-inline-size: 40rem;
min-inline-size: 15rem;
}Si min supera max, las reglas de resolución pueden hacer que min tenga prioridad.
auto depende del contexto:
Floats, inline-blocks y ciertos positioned elements utilizan cálculos relacionados con min-content, preferred size y espacio disponible.
.content {
overflow-wrap: anywhere;
}Puede reducir contribuciones min-content cuando se permite romper cadenas largas.
grid-template-columns: repeat(3, minmax(0, 1fr));Usar 0 permite que tracks flexibles encojan por debajo de la min-content contribution. minmax(auto, 1fr) puede preservar mínimos basados en contenido.
.page {
inline-size: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.tag {
inline-size: fit-content;
max-inline-size: 100%;
}¿Por qué max-content puede romper un layout móvil?
Porque solicita el ancho necesario sin wrapping y puede superar el espacio disponible.
Aspect ratio y replaced elements conecta dimensiones intrínsecas con imágenes y medios.