Классы минимальной высоты задают свойство min-height: элемент может быть
выше, но не ниже заданного значения. Берите их, чтобы блок занимал хотя бы
высоту родителя или окна и при этом рос вместе с содержимым.
Пример
Высота родителя
Пунктирная рамка — родитель с высотой h-e6. min-h-full растягивает
элемент на высоту родителя и сильнее его собственной высоты h-c0.
У всех образцов высота h-a8 — меньше, чем нужно тексту. Без минимума текст
выходит за фон; min-h-min, min-h-max и min-h-fit растягивают элемент
до высоты содержимого.
HTML
<divclass="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">h-a8</code>
<divclass="h-d6">
<divclass="h-a8 p-1 bg-primary-container border border-primary radius-ui color-on-primary-container">Текст в две строки:<br>высота по содержимому</div>
</div>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">h-a8 min-h-min</code>
<divclass="h-d6">
<divclass="h-a8 min-h-min p-1 bg-primary-container border border-primary radius-ui color-on-primary-container">Текст в две строки:<br>высота по содержимому</div>
</div>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">h-a8 min-h-max</code>
<divclass="h-d6">
<divclass="h-a8 min-h-max p-1 bg-primary-container border border-primary radius-ui color-on-primary-container">Текст в две строки:<br>высота по содержимому</div>
</div>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">h-a8 min-h-fit</code>
<divclass="h-d6">
<divclass="h-a8 min-h-fit p-1 bg-primary-container border border-primary radius-ui color-on-primary-container">Текст в две строки:<br>высота по содержимому</div>
</div>
</div>
</div>
Прокрутка во флекс-колонке
Флекс-элемент по умолчанию не становится ниже своего содержимого, поэтому
вложенный список не прокручивается и обрезается рамкой. min-h-0 снимает
этот минимум: элемент занимает оставшееся место, а список внутри
прокручивается.
