max-height

Ejemplos

Ejemplo básico

Usa utilidades max-h-<number> como max-h-24 y max-h-64 para establecer una altura máxima fija para un elemento basada en la escala de espaciado:

<div class="h-96 ...">
  <div class="h-full max-h-80 ...">max-h-80</div>
  <div class="h-full max-h-64 ...">max-h-64</div>
  <div class="h-full max-h-48 ...">max-h-48</div>
  <div class="h-full max-h-40 ...">max-h-40</div>
  <div class="h-full max-h-32 ...">max-h-32</div>
  <div class="h-full max-h-24 ...">max-h-24</div>
</div>

Usando un porcentaje

Usa utilidades max-h-full o max-h-<fraction> como max-h-1/2 y max-h-2/5 para darle a un elemento una altura máxima basada en porcentajes:

<div class="h-96 ...">
  <div class="h-full max-h-9/10 ...">max-h-9/10</div>
  <div class="h-full max-h-3/4 ...">max-h-3/4</div>
  <div class="h-full max-h-1/2 ...">max-h-1/2</div>
  <div class="h-full max-h-1/4 ...">max-h-1/4</div>
  <div class="h-full max-h-full ...">max-h-full</div>
</div>

Usando un valor personalizado

Usa la sintaxis max-h-[<value>] para establecer el maximum height basado en un valor completamente personalizado:

<div class="max-h-[220px] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis max-h-(<custom-property>) :

<div class="max-h-(--my-max-height) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para max-h-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad max-height con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="h-48 max-h-full md:max-h-screen ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Las utilidades max-h-<number> son impulsadas por la variable de tema --spacing, la cual puede ser personalizada en tu propio tema:

@theme {
  --spacing: 1px; 
}

Aprende más sobre la personalización de la escala de espaciado en la documentación de variables de tema.