مشكلة Flexbox Overflow-Y مع العناصر المتداخلة في Firefox

في تخطيط CSS باستخدام flexbox، حيث يتم تضمين العناصر المتداخلة داخل flexbox الأصلي العنصر، قد لا يعمل overflow-y كما هو متوقع في Firefox. تنشأ هذه المشكلة على وجه التحديد عندما يتم إعطاء العنصر المتداخل خاصية overflow-y لـ auto.

شرح المشكلة:

تقوم عناصر Flexbox تلقائيًا بحساب الحد الأدنى لحجمها استنادًا إلى الجوهري حجم عناصر أطفالهم. ومع ذلك، عندما تكون هناك عناصر فرعية تم تطبيق خصائص تجاوز السعة عليها، مثل overflow-y، سيحتفظ العنصر المرن بالحجم الأدنى المكافئ لمحتوى الطفل، حتى لو تجاوز المساحة المتوفرة.

الحل :

لحل هذه المشكلة في Firefox، من الضروري تعيين خاصية min-height للعنصر المرن الأصلي بشكل صريح على 0. يؤدي هذا إلى تعطيل سلوك الحد الأدنى الافتراضي للحجم ويسمح للعنصر المرن بالانكماش أسفل الحد الأدنى لحجم المحتوى الخاص بالطفل.

.parent-flex-item {
  min-height: 0;
}

من خلال تطبيق هذا الإصلاح، سيتمكن العنصر المتداخل مع overflow-y: auto الآن من تقليص شريط التمرير وعرضه عندما يتجاوز محتواه الارتفاع المتاح.

مثال كود :

ضع في اعتبارك كود HTML وCSS التالي:

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

باستخدام هذا الرمز، سيكون للعنصر المتداخل شريط تمرير في Firefox، مما يسمح للمستخدمين بمشاهدة المحتوى الفائض.