Flexbugs: IE11 नेस्टेड फ्लेक्स तत्व पर चौड़ाई पर ध्यान नहीं देता

को निर्मित 28 नव॰ 2015 · 3टिप्पणियाँ · स्रोत: philipwalton/flexbugs

मैंने इसके बहुत सारे पुनरावृत्तियों की कोशिश की है ... एफएफ/क्रोम/सफारी में शून्य मुद्दे हैं, लेकिन आईई 11 में 'एलिमेंट' ऑब्जेक्ट्स का समूह सिर्फ एक लंबी लाइन बन जाता है।

मेरी मदद करो ओबी-वान? ...

<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

साथ ही, भविष्य में कृपया केवल कोड के बजाय एक डेमो पोस्ट करें, अन्यथा मुझे इसे एक साथ रखना होगा और अगर मैं अच्छे मूड में नहीं होता तो शायद मैं इसे नहीं करता :)

philipwalton 2 दिस॰ 2015

👍29 ❤4 🎉4 😄4 👎2

सभी 3 टिप्पणियाँ

यह आपकी साइट को ठीक करता है:
http://codepen.io/anon/pen/OMLRVN

philipwalton 2 दिस॰ 2015

👍29 ❤4 🎉4 😄4 👎2

तहेदिल से शुक्रिया। ऐसा लगता है कि यह चाल है!

scjnsn 2 दिस॰ 2015

निशान

zd1010150 30 जून 2017

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Flexbugs: IE11 नेस्टेड फ्लेक्स तत्व पर चौड़ाई पर ध्यान नहीं देता

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों