ویژگی 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 ارتفاع بشه، مرورگر به‌طور خودکار اسکرول میده.