overflow

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

1️⃣ مقادیر overflow

visible (پیش‌فرض)

محتوا حتی اگر از محدوده‌ی عنصر خارج بشه، همچنان نمایش داده می‌شه.

.box { width: 200px; height: 100px; overflow: visible; /* پیش‌فرض */ }

hidden

محتوایی که از محدوده خارج بشه بریده می‌شه و دیده نمی‌شه.

.box { width: 200px; height: 100px; overflow: hidden; }

scroll

همیشه اسکرول‌بار اضافه می‌شه (چه نیاز باشه چه نباشه).

.box { width: 200px; height: 100px; overflow: scroll; }

auto

اگر محتوا بیشتر از اندازه عنصر باشه → اسکرول‌بار ظاهر می‌شه،
اگر جا بشه → اسکرول‌بار نمیاد.

.box { width: 200px; height: 100px; overflow: auto; }

2️⃣ overflow-x و overflow-y

می‌تونی کنترل جداگانه برای محور افقی (x) و عمودی (y) داشته باشی:

.box { width: 200px; height: 100px; overflow-x: scroll; /* فقط افقی */ overflow-y: hidden; /* فقط عمودی */ }

3️⃣ نکات مهم

  • برای اینکه overflow عمل کنه، معمولاً باید ابعاد (width, height) مشخص بشه.

  • اگر عنصر position: absolute یا relative داشته باشه، overflow داخل همون باکس محاسبه می‌شه.

  • توی طراحی ریسپانسیو، معمولاً overflow: auto; یا hidden استفاده می‌شه تا صفحه به هم نریزه.

4️⃣ مثال کاربردی

<div class="box"> <p> این متن خیلی خیلی طولانیه و می‌خوایم ببینیم مرورگر چطوری باهاش رفتار می‌کنه... </p> </div>
.box { width: 200px; height: 100px; border: 2px solid #333; overflow: auto; }

📌 اینجا اگر متن بیشتر از 100px ارتفاع بشه، مرورگر به‌طور خودکار اسکرول میده.