ما سبب تجاوز العناصر للمحور الأفقي في حاوية مرنة عند استعراض الموقع في شاشات أقل عرضا؟

مصطفى اوريك · 8 فبراير 2022

لدينا في صفحة HTML :

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</di>

و في صفحة CSS :

* {
  box-sizing: border-box;
}
.parent {
  background-color: #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.parent > div {
  background-color: red;
  padding: 10px;
  flex: 1 100px;
}

أريد معرفة لماذا عندما أقوم بتصغير عرض الشاشة و أصل للعرض 307px تقريبا يظهر تجاوز للعناصر على المحور الأفقي overflow كالتالي:

ألا يفترض أن لا يحدث ذلك كون الحاوية parent مرنة؟

لتجربة الكود : https://codepen.io/Lodlma_45/full/MWOpjoB

Adnane Kadri · 8 فبراير 2022

من غير المنطقي أن يتم إخفاء العناصر على المحور X في حاوية مرنة (display:flex) مرفقة بالقيمة wrap في الخاصية flex-wrap، فأي عنصر يحمل عرضا لا يكفي سيتم إنزاله للسطر الثاني وهكذا.

أظن أن المشكلة بالضبط هي في تهيئة المتصفح لتفسير الصفحة على عرض معين. إذ تحدث المشكلة أحيانا عند الانتقال من عرض 1 الى عرض 2 مباشرة في المتصفح دون انتقالة بين العرضين. فعندما نقوم مثلا باستعراض عنصر ما عن طريق Inspect ثم نقوم بتغيير العرض الى عرض معين (وليكن 307px) ثم نغلق شاشة الاستعراض. ونقوم مباشرة باستعراض العنصر مرة ثانية فسيحافظ المتصفح على العرض الذي استعرضت به العنصر سابقا ويظهر لك مباشرة 307 في شاشة الاستعراض. وبسبب الانتقالة من عرض الشاشة كاملة الى العرض 307 دون تدرج يحدث أن لا يستجيب المتصفح لهاته الانتقالة وتظهر وكأنها غير متجاوبة. وقد تأخذ من البعض ساعات وساعات وهو يحاول ضبط التجاوبية ولكن دون فعالية. وهذا ما حدث معك ببساطة.

وكدليل عن ذلك، لاحظ أن حتى شريط التنقل الخاص بموقع CodePen لا يظهر بشكل متجاوب أثناء عمل هاته الانتقالة مباشرة.

screenbud-91f80e7b-210b-4bd5-84ca-9875f582aa74.png.357c29da994c58cfe445248017f8bcb0.png

في حين أن نفس المشكلة لا تظهر وبنفس الموقع عند مجرد إعادة تهيئة المتصفح ليلتقط هذا العرض المستهدف. يمكنك ذلك عن طريق الضغط على أيقونة الشاشات مرتين لتهيئة العرض مجددا.

screenbud-21e64730-0241-4aec-8b90-de12ee3dd773.png.9ccf67fa1dd6a6cda92e023050784e16.png