طريقة الـ grid بتغيّر حجم الصف، مش حجم الكلام اللي جواه.
لما الصف يبقى 0fr، مساحته صفر. المحتوى لسه طوله الطبيعي. من غير قص، الكلام يطفح بره الصف ويظهر كامل. الحركة مش هتبان، والقائمة مفتوحة وهي المفروض مقفولة.
overflow: hidden معناها: اللي يخرج بره الحدود، اقصه. الصف وهو بيكبر من صفر لـ 1fr بيكشف المحتوى حتة حتة.
شيل الخاصية وهتلاقي القائمة تظهر مرة واحدة.
ليه مش على الـ wrapper؟
الـ wrapper هو صندوق الـ grid. المحتوى ابنه، يعني عنصر الصف.
عناصر الـ grid والـ flex ليها حد أدنى تلقائي. الاسم الشائع min-height: auto. العنصر رافض يصغّر أوي عن حجم محتواه، حتى لو الصف طالب يبقى صفر.
القص على الأب مش بيلغي الحد ده. الابن متمسك بطوله، فالصف مش بيوصل لصفر فعلًا. الحركة تبقى ناقصة، أو القائمة متقفلش.
القص على الابن نفسه بيلغي الحد الأدنى التلقائي. ساعتها يقدر يصغّر مع الصف لحد الصفر.
جرّب تعكس المكانين: القص على الـ wrapper وبس. القائمة مش هتقفل تمام.