एक फ्लेक्स कंटेनर में टेक्स्ट IE11 में नहीं लिपटा है

Question

निम्नलिखित स्निपेट पर विचार करें:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Chrome में, पाठ अपेक्षित रूप से लपेट रहा है:

लेकिन, IE11 में, पाठ रैपिंग नहीं है :

यह IE में एक ज्ञात बग है? (यदि हाँ, एक सूचक की सराहना की जाएगी)

क्या कोई ज्ञात समाधान है?

---

इस तरह के प्रश्न का कोई निश्चित उत्तर और आधिकारिक सूचक नहीं होता है।

Comments

IE11 फ्लेक्सबॉक्स

— सिमेन

जब मैं align-items: centerमूल तत्व से हटाता हूं तो समस्या दूर हो जाती है । ऐसा लगता है कि इसका क्या कारण है

— नाथन पेरियर

Answer 1

इसे अपने कोड में जोड़ें:

.child { width: 100%; }

हम जानते हैं कि एक ब्लॉक-स्तरीय बच्चे को माता-पिता की पूरी चौड़ाई पर कब्जा करना चाहिए।

क्रोम इसे समझता है।

IE11, जो भी कारण से, एक स्पष्ट अनुरोध चाहता है।

का उपयोग करना flex-basis: 100%या flex: 1भी काम करता है।

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

नोट: कभी-कभी यह आवश्यक होगा कि HTML संरचना के विभिन्न स्तरों के माध्यम से छंटाई की जाए कि कौन सा कंटेनर किसका है width: 100%। IE में सीएसएस रैप टेक्स्ट काम नहीं कर रहा है

Comments

मुझे चौड़ाई जोड़ना था: 100%; माता पिता के लिए। इस बग के संदर्भ के आधार पर विभिन्न सुधार हैं। आह!

— डेनिस जॉन्सन

बल्कि .child पर "अधिकतम-चौड़ाई: 100%" का उपयोग करें।

— टायलर

मैं फ्लेक्स का उपयोग करके एक तालिका बना रहा हूं (प्रत्येक पंक्ति एक फ्लेक्स है, जिसमें बच्चे हैं: flex: 1 1 50%; display: flex; align-items: center;आश्चर्य की बात नहीं है। सेल में लंबे पाठ को शब्द-लपेटते समय IE विफल रहता है। सेटिंग width:100%काम करता है, लेकिन सेटिंग min-width: 100%नहीं करता है! इसे करना चाहिए, लेकिन यह नहीं है ' t (सभी चीजों की तरह IE), इसलिए मैंने कोशिश की max-width: 99%, और आश्चर्य की बात है, यह काम करता है । मुझे लगता है कि width:100%बेहतर उपयोग हो सकता है?

— कुमारहर्ष 14'17

मुझे flex-direction: columnकाम करने के लिए माता-पिता पर हटाना पड़ा ।

— dman

यह समस्या फ्लेक्स कॉलम के लिए अनन्य है। फ्लेक्स पंक्तियों के साथ नहीं होता है।

— द्राज़ेन बेज़ेलोवुक

Answer 2

मेरे पास एक ही मुद्दा था और मुद्दा यह है कि तत्व कंटेनर में इसकी चौड़ाई का अनुकूलन नहीं कर रहा था।

उपयोग करने के बजाय width:100%, सुसंगत रहें (फ्लोटिंग मॉडल और फ्लेक्स मॉडल को न मिलाएं) और इसे जोड़कर फ्लेक्स का उपयोग करें:

.child { align-self: stretch; }

या:

.parent { align-items: stretch; }

इसने मेरे लिए काम किया।

Comments

हाँ, यह जवाब भी समझ में आता है (और शायद चौड़ाई एक से अधिक सही है)। मेरे एक डिजाइन में, चौड़ाई सेट करना: 100% संभव नहीं है, और यह समाधान अच्छी तरह से काम करता है।

— कुमारहर्ष

Answer 3

जैसा कि टायलर ने यहां टिप्पणियों में से एक का उपयोग करके सुझाव दिया है

max-width: 100%;

बच्चे पर काम हो सकता है (मेरे लिए काम किया)। का उपयोग करते हुए align-self: stretchही काम करता है अगर आप उपयोग नहीं कर रहे align-items: centerहैं (जो मैंने किया था)। width: 100%केवल तभी काम करता है जब आप अपने फ्लेक्सबॉक्स के अंदर कई चिल्ड नहीं रखते हैं जिसे आप साइड में दिखाना चाहते हैं।

Comments

अधिकतम-चौड़ाई मेरे लिए तब काम करती है जब उसी कंटेनर में लगाया जाता है जो संरेखित करता है: फ्लेक्स-स्टार्ट पर रखा गया था।

— Herms

Answer 4

मेरे लिए नमस्ते मुझे इसके दादा-दादी तत्व को 100% चौड़ाई लागू करनी थी। इसका बाल तत्व नहीं है।

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

Comments

मेरे पास "चौड़ाई: ऑटो;" दादा-दादी पर। मेरे लिए 100% पर स्विच करना तय है।

— १२:५० पर jensanity5000

Answer 5

किसी तरह ये सभी समाधान मेरे काम नहीं आए। इसमें आईई बग स्पष्ट रूप से हैflex-direction:column ।

मैंने इसे हटाने के बाद ही काम किया flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

Answer 6

प्रस्तावित समाधान से मुझे ".child {चौड़ाई: 100%;}" में मदद नहीं मिली, क्योंकि मेरे पास अधिक जटिल मार्कअप था। हालांकि, मुझे एक समाधान मिला - "संरेखित-आइटम: केंद्र;" को हटा दें, और यह इस मामले के लिए भी काम करता है।

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Comments

आप निकालना की जरूरत नहीं है align-items: center। देखें stackoverflow.com/a/39365207/630170

— kumarharsh

Answer 7

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

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

काम को ठीक करने के लिए आपको स्वाभाविक रूप से इनलाइन चाइल्ड एलिमेंट्स (जैसे। <span>या <a>) इनलाइन (मुख्य रूप से डिस्प्ले: ब्लॉक या डिस्प्ले: इनलाइन-ब्लॉक) के अलावा कुछ और सेट करना होगा।

Answer 8

मुझे यहाँ अपना समाधान नहीं मिला, शायद कोई उपयोगी होगा:

.child-with-overflowed-text{
  word-wrap: break-all;
}

सौभाग्य!

Answer 9

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

इसने मेरे लिए काम किया।

Answer 10

मुझे भी इस मुद्दे का सामना करना पड़ा।

एकमात्र विकल्प बाल तत्वों में एक चौड़ाई (या अधिकतम-चौड़ाई) को परिभाषित करना है। IE 11 थोड़ा बेवकूफ है, और मुझे इस समाधान का एहसास करने में सिर्फ 20 मिनट का समय लगा।

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Answer 11

मैं एक फ्लेक्स रैपर में छवियों को बहाने के साथ एक समान मुद्दा था।

मेरे साथ तय किए गए ओवरफ्लो होने वाले बच्चे को flex-basis: 100%;या तो जोड़ना flex: 1;मेरे लिए काम कर गया।

Comments

यह समाधान पहले से ही, वर्षों पहले दिया गया है, और हमें केवल एक की आवश्यकता है, इसलिए डुप्लिकेट उत्तर पोस्ट करने से बचें।

— असन

Answer 12

यदि कोई सरल कार्य भी करता है तो एक जटिल समाधान का उपयोग क्यों करें?

.child {
  white-space: normal;
}