🧠 چرا 100vw گاهی باعث اسکرول افقی سایت میشه؟

یه باگ عجیب CSS که احتمالاً یه بار باهاش برخورد کردی:

صفحه‌ات کاملاً ریسپانسیوه، ولی یه‌دفعه پایین سایت Horizontal Scroll ظاهر میشه. 😐

یکی از مظنون‌های اصلی:

.full-width {
    width: 100vw;
}

مشکل اینجاست که 100vw عرض کل Viewport رو در نظر می‌گیره؛ حتی فضایی که ممکنه Scrollbar اشغال کرده باشه.

در بعضی شرایط نتیجه میشه:

Viewport
├───────────────┤
Content
├─────────────────┤ ← کمی بزرگ‌تر

و همین چند پیکسل باعث Scroll افقی میشه.

برای خیلی از المان‌ها، مخصوصاً داخل Containerها، این بهتره:

.full-width {
    width: 100%;
}

البته 100vw خودش بد نیست و در بعضی Layoutها دقیقاً همون چیزیه که می‌خوای.

نکته اینه که Viewport Width با Container Width یکی نیست.

این تفاوت کوچیک یکی از اون چیزهاییه که وقتی Layout پیچیده میشه، خودش رو نشون میده.

@CodeVerse_dev