अधिकतम 11 चौड़ाई

Question

के साथ फ्लेक्सबॉक्स आइटम के साथ आईई 11 अंक आईई 11 में जब कोई आइटम आइटम सही ढंग से केंद्र नहीं होता है तो उनके पास अधिकतम चौड़ाई संपत्ति होती है। हालांकि यह उदाहरण क्रोम और फ़ायरफ़ॉक्स में काम करता है।

JS Bin

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: blue; 
 
    width: 100%; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    max-width: 200px; 
 
}

<div class="container"> 
 
    <div class="red">non centered box</div> 
 
</div>

Answer 1

यह एक बग है। लेकिन IE Feedback के अनुसार यह पहले ही तय किया जाना था।

एक कामकाज के रूप में, यदि आप इसका उपयोग नहीं करना चाहते हैं तो आप flex-grow: 1; निकाल सकते हैं।

Answer 2

स्पष्ट रूप से width: calc(100%); सेट करें, इसलिए आईई बॉक्स चौड़ाई को जानता है और इसे ठीक से केंद्रित करता है।