چرا overflow-y: auto باعث می‌شود overflow-x پنهان شود؟

مفهوم overflow در CSS

در CSS، ویژگی overflow برای کنترل چگونگی نمایش محتوایی که از محدوده عنصر خارج می‌شود، استفاده می‌شود. حالت‌های مختلف overflow شامل visible, hidden, scroll, و auto هستند. overflow-x و overflow-y به ترتیب برای کنترل محتوای اضافی به صورت افقی و عمودی استفاده می‌شوند.

ارتباط بین overflow-x و overflow-y

هنگامی که overflow-y: auto تنظیم می‌شود، مرورگر به صورت پیشفرض تلاش می‌کند تا محتوای اضافی را در جهت عمودی مدیریت کند. با این حال، در برخی موارد، این تنظیم باعث می‌شود که محتوا در جهت افقی هم نمایش داده نشود. این به این دلیل است که مرورگرها برای بهینه‌سازی چارچوب‌بندی صفحه‌ها، ترجیح می‌دهند محتوا را در یک جهت محدود کنند و نیازی به اسکرول افقی نباشد.

نحوه عملکرد overflow-y: auto

هنگامی که overflow-y روی auto تنظیم می‌شود، مرورگر تنها زمانی که محتوا بیش از حد شود، اسکرول‌بار عمودی را فعال می‌کند. در حالت عادی، اگر هیچ محتوای اضافی وجود نداشته باشد، هیچ اسکرول‌باری ظاهر نمی‌شود. با این حال، این ویژگی ممکن است به طور غیرمستقیم overflow-x را تحت تاثیر قرار دهد، مخصوصاً زمانی که عرض محتوای داخلی به نسبت بیشتر از محتوای عمودی باشد.

راهکارهایی برای کنترل بهتر overflow

اگر تمایلی به پنهان شدن اسکرول افقی ندارید، می‌توانید از تنظیمات overflow-x به صورت جداگانه استفاده کنید. به عنوان مثال، می‌توانید به صراحت overflow-x: visible; را تنظیم کنید تا مطمئن شوید محتوا در جهت افقی دیده می‌شود.

<style>
  .content {
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow-x: visible;
    overflow-y: auto;
  }
</style>
<div class="content">
  <p>این یک متن نمونه‌ با محتوای بیشتر از حد معمول در یک باکس مشخص شده است.</p>
  <p>اگر عرض این باکس کافی نباشد، این متن باید باعث شود که قابلیت اسکرول اعمال شود.</p>
</div>

توضیح کد