"इनलाइन फ्लेक्स" आइटम इंटरनेट एक्सप्लोरर

Question

में अपनी सामग्री के साथ भी नहीं बढ़ता है मैं एक साधारण तालिका संरचना divs से बना है:

$(document).ready(function() { 
 
    $("button").on("click", function() { 
 
    $(".cell").outerWidth(500); 
 
    }) 
 
})

div { 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 100%; 
 
    padding: 5px; 
 
    overflow: auto; 
 
} 
 

 
.row { 
 
    min-width: 100%; 
 
    width: auto; 
 
    display: inline-flex; 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
    border-color: red; 
 
} 
 

 
.cell { 
 
    flex: 0 0 auto; 
 
    border-right: 1px solid black; 
 
    overflow: hidden; 
 
    min-width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">x</div> 
 
    </div> 
 
</div> 
 
<button type="button">Change width</button>

पंक्तियों खड़ी खड़ी करने की आवश्यकता, प्रत्येक में उनकी सामग्री की (अज्ञात) ऊंचाई होती है और कम से कम कंटेनर के रूप में चौड़ी होनी चाहिए। अगर सामग्री फिट नहीं होती है तो कंटेनर को स्क्रॉल करना पड़ता है। कोशिकाओं की चौड़ाई जेएस का उपयोग करके इंटरैक्टिव रूप से बदल दी जाएगी और पंक्तियों को पूरी सामग्री में फिट करने के लिए विस्तारित किया जाना चाहिए।

.row { 
    min-width: 100%; 
    width: auto; 
    display: inline-flex; 
} 

flex भाग की कोशिकाओं के लिए की जरूरत है और इस सवाल के दायरे से बाहर है: इस कारण से, पंक्तियों निम्नलिखित शैली है। inline तत्व होने के नाते, पंक्ति सभी प्रमुख ब्राउज़रों में सामग्री के साथ बढ़ेगी लेकिन इंटरनेट एक्सप्लोरर 11 में नहीं। 11.देखें और कक्षों की चौड़ाई बदलने के लिए बटन पर क्लिक करें। सीमा व्यवहार को देखने में मदद करता है। नीचे दी गई छवि अपेक्षित व्यवहार (ऊपर) और कैसे इंटरनेट एक्सप्लोरर यह व्याख्या (नीचे) दिखाता है:

बग किस तरह यह (यह the list of flexbugs से समझ नहीं सकता है) और मैं कैसे कर सकते हैं यह इंटरनेट एक्सप्लोरर में काम करता है?

Answer 1

यहां एक समाधान है जिसके साथ मैं आया हूं ... जो फ्लेक्स का बिल्कुल उपयोग नहीं करता है।

अपडेटेडः सीएसएस को मार्जिन और पैडिंग को बेहतर तरीके से संभालने के लिए सरलीकृत किया गया। जब आप कंटेनर की निश्चित चौड़ाई के कारण सेल को बड़ा करने के लिए बटन पर क्लिक करते हैं, तो कोई मार्जिनपंक्ति और कंटेनर के बीच होता है।

$(document).ready(function() { 
 
    $("button").on("click", function() { 
 
     $(".cell").width(500); 
 
    }) 
 
})

html, body { width: 100%; height: 100%; margin:0; padding:0; } 
 
div { 
 
    border: 1px solid black; 
 
    /* box-sizing: border-box; */ 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    padding: 5px; 
 
    margin:10px; 
 
    background: green; 
 
    overflow: auto; 
 
} 
 
.container::after, .row::after { 
 
    content: " "; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    clear:both; 
 
} 
 

 
.row { 
 
    min-width: calc(100% - 22px); 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border-color: red; 
 
    background: pink; 
 
    float:left; 
 
} 
 
.container > *:last-child { 
 
    /* margin: 0; */ 
 
} 
 

 
.cell { 
 
    padding: 5px; 
 
    margin:5px; 
 
    border-right: 1px solid black; 
 
    overflow: hidden; 
 
    width: calc(200px - 22px); 
 
    background: orange; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell">x</div> 
 
    </div> 
 
</div> 
 
<button type="button">Change width</button>

Answer 2

समस्या:

div { 
    box-sizing: border-box; 
} 

.cell { 
    flex: 0 0 auto; 
} 

समाधान:

आप तो सीएसएस के इस हिस्से को बदलने के लिए नहीं करना चाहते हैं, मैं सुझाव है कि आप के बजाय न्यूनतम-चौड़ाई की स्थापना की, चौड़ाई की स्थापना से बचने के लिए

$(document).ready(function() { 
    $("button").on("click", function() { 
    $(".cell").css("min-width","500px"); 
    }) 
}) 

Answer 3

IE11 में के रूप में करना चाहता था व्यवहार है:

डिफ़ॉल्ट फ्लेक्स व्यवहार फ्लेक्स आइटम बदल गया है। इंटरनेट एक्सप्लोरर 10 में, फ्लेक्स आइटम जो उनके कंटेनरों में फिट नहीं हुए कंटेनर के मार्जिन से अधिक हो गए हैं या कंटेनर के मार्जिन पर फिसल गए हैं। आईई 11 से शुरू होने पर, ये आइटम अब अपने कंटेनरों (न्यूनतम निर्दिष्ट मूल्य तक, निर्दिष्ट होने पर) फिट करने के लिए कम हो जाते हैं। इस व्यवहार को बदलने के लिए फ्लेक्स-सिकंक संपत्ति का उपयोग करें।

https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx

तो, निम्नलिखित .cell नियमों मुद्दा

.cell { 
    flex: 0 0 auto; 
    -ms-flex: 0 1 auto; /* overwrites the previous rule only in IE11 */ 
    border-right: 1px solid black; 
    overflow: hidden; 
    min-width: 200px; 
}