🔹 Max-Height چیه؟

ویژگی max-height بیشترین ارتفاع مجاز برای یک عنصر رو مشخص می‌کنه.
📌 یعنی عنصر می‌تونه کوچیک‌تر بشه، ولی هیچ وقت بزرگ‌تر از اون مقدار نمیشه، حتی اگر محتوا بیشتر باشه (در این حالت اسکرول می‌گیره).

🔹 کلاس‌های Max-Height در Tailwind

• max-h-0 → 0px

• max-h-px → 1px

• max-h-1 → 0.25rem (4px)

• max-h-16 → 4rem (64px)

• max-h-32 → 8rem (128px)

• max-h-64 → 16rem (256px)

• max-h-96 → 24rem (384px)

• max-h-full → 100% از والد

• max-h-screen → 100vh (کل ارتفاع صفحه)

• max-h-min → حداقل ارتفاع لازم برای محتوای داخلی

• max-h-max → بیشترین ارتفاع براساس محتوای داخلی

• max-h-fit → فقط به اندازه محتوای مورد نیاز

🔹 مثال (max-height ثابت)

<div class="max-h-32 bg-blue-400 text-white overflow-y-auto p-2">
  این متن طولانیه و باکس بیشتر از 128px ارتفاع نمی‌گیره.
  اگر متن از ارتفاع بیشتر شد، اسکرول عمودی میاد.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

🔹 مثال (max-height: screen)

<div class="max-h-screen bg-green-400 text-white p-4 overflow-y-scroll">
  این باکس حداکثر به اندازه ارتفاع صفحه رشد می‌کنه
</div>

🔹 مثال (max-height: full)

<div class="h-96 bg-gray-200">
  <div class="max-h-full bg-purple-400 text-white p-2 overflow-auto">
    این باکس بیشتر از ارتفاع والدش رشد نمی‌کنه
  </div>
</div>

🔹 نکته مهم

• خیلی وقت‌ها max-h همراه با overflow-y-auto برای ساختن لیست‌های اسکرول‌دار استفاده میشه.

• توی مدال‌ها (modals) و sidebarها هم پرکاربرده تا ارتفاع محتوای داخلی کنترل بشه.

• با responsive هم می‌تونی کنترل کنی:

  <div class="max-h-32 md:max-h-64 lg:max-h-screen">...</div>