Flexbugs: IE11 يتجاهل العرض على العنصر المرن المتداخل

تم إنشاؤها على ٢٨ نوفمبر ٢٠١٥ · 3تعليقات · مصدر: philipwalton/flexbugs

لقد جربت العديد من التكرارات لهذا ... لا توجد مشكلات في ff / chrome / safari ، ولكن في IE11 تصبح مجموعة كائنات "العنصر" سطرًا واحدًا طويلاً.

ساعدني obi-wan؟ ...

<html ><body>
<style>
.outer-rowwrap{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:1200px;height:100%;background-color:#f0f0f0;}
.inner-rowwrap{display:flex;flex-direction:row;flex-wrap:wrap;}
.nested-element{width:100px;text-align:center;border:1px solid #333;margin:5px;}
.nogrow{flex-grow:0;flex-shrink:0;flex-basis:auto;}
.grow1{flex-grow:1;flex-shrink:1;flex-basis:auto;}
</style>
<div class="outer-rowwrap">
    <div class="nogrow" style="width:200px;background-color:#ccc;">column here</div>
    <div class="grow1">
        <div class="inner-rowwrap">
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
        </div>
    </div>
</div>
</body>
</html>

مصدر

scjnsn

👍2

التعليق الأكثر فائدة

لا يتعامل IE11 مع flex-basis: auto + flex-grow: 1 جيدًا عندما يكون عرض الحاوية غير محدد. لم أتمكن حقًا من حل مشكلة ريبو + حل بديل ، لذلك لم أقم بتوثيقه.

هذا يصلح موقعك:
http://codepen.io/anon/pen/OMLRVN

أيضًا ، في المستقبل ، يرجى نشر عرض توضيحي بدلاً من مجرد رمز ، وإلا فسيتعين عليّ وضعه معًا وإذا لم أكن في حالة مزاجية جيدة ، فربما لن أفعل ذلك :)