🔹 Overflow چیه؟

وقتی محتوای یک المان از ابعاد ظرفش (width/height) بزرگ‌تر بشه، مرورگر باید تصمیم بگیره اون محتوا رو چطور نمایش بده.
ویژگی overflow دقیقاً همین رو کنترل می‌کنه.

🔹 کلاس‌های Overflow در Tailwind

• overflow-auto → اسکرول ظاهر میشه فقط وقتی لازم باشه.

• overflow-hidden → محتوای اضافی بریده میشه و نمایش داده نمیشه.

• overflow-visible → محتوای اضافی دیده میشه (پیش‌فرض مرورگر).

• overflow-scroll → همیشه اسکرول ظاهر میشه (چه لازم باشه چه نباشه).

همچنین میشه جهت رو هم مشخص کرد:

• overflow-x-auto → کنترل overflow افقی.

• overflow-y-auto → کنترل overflow عمودی.

🔹 مثال (overflow-hidden)

<div class="w-40 h-20 border overflow-hidden">
  <p>
    این یک متن طولانیه که از ظرف بیرون می‌زنه اما با overflow-hidden بریده میشه.
  </p>
</div>

📌 متن اضافی نمایش داده نمیشه.

🔹 مثال (overflow-auto)

<div class="w-40 h-20 border overflow-auto">
  <p>
    این متن طولانیه و چون جا نمیشه اسکرول ظاهر میشه. اگه متن کوتاه بود، اسکرول نمی‌اومد.
  </p>
</div>

🔹 مثال (overflow-scroll)

<div class="w-40 h-20 border overflow-scroll">
  <p>
    حتی اگه متن کوتاه هم باشه، اسکرول همیشه ظاهر میشه.
  </p>
</div>

🔹 مثال جهت‌دار (overflow-x-auto)

<div class="w-40 h-20 border overflow-x-auto">
  <div class="w-80 bg-blue-200">
    این متن خیلی پهنه و باید اسکرول افقی داشته باشه.
  </div>
</div>

📌 فقط در جهت افقی اسکرول میاد.

🔹 نکته مهم

• overflow-hidden خیلی برای ساختن کارت‌ها یا بخش‌های با سایز محدود کاربرد داره.

• برای جداول بزرگ یا کد بلاک‌ها معمولاً از overflow-x-auto استفاده میشه.

• همیشه بهتره همراه با w- و h- محدودیت ظرف رو مشخص کنی تا overflow معنی داشته باشه.