একটি ফ্লেক্স ধারক পাঠ্য আইই 11 এ মোড়ানো হয় না

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>

ক্রোমে, পাঠ্যটি প্রত্যাশার মতো মোড়ানো হচ্ছে:

তবে, আই 11 এ, পাঠ্যটি মোড়ানো হচ্ছে না :

এটি কি আইই এর একটি পরিচিত বাগ? (যদি হ্যাঁ, একটি পয়েন্টার প্রশংসা করা হবে)

কোন পরিচিত কাজ আছে?

---

এই অনুরূপ প্রশ্নের একটি নির্দিষ্ট উত্তর এবং একটি সরকারী পয়েন্টার নেই।

Comments

টেক্সট মোড়ানো রোধ করে আইই 11 ফ্লেক্সবক্সের

— সিমেন এস

আমি align-items: centerপিতামূলক উপাদান থেকে সরিয়ে দিলে সমস্যাটি চলে যায় । এটি দেখে মনে হচ্ছে এটি কি ঘটছে

— নাথান পেরিয়ার

Answer 1

এটি আপনার কোডে যুক্ত করুন:

.child { width: 100%; }

আমরা জানি যে একটি ব্লক-স্তরের সন্তানের পিতামাতার সম্পূর্ণ প্রস্থ দখল করা উচিত।

ক্রোম এটি বোঝে।

আইই 11, যে কারণেই হোক না কেন, একটি স্পষ্ট অনুরোধ চায়।

ব্যবহার 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>

দ্রষ্টব্য: কখনও কখনও এটি এইচটিএমএল কাঠামোর বিভিন্ন স্তরের মধ্যে বাছাই করা প্রয়োজন যেটি কোন পাত্রে পায় তা নির্ধারণ করার জন্য width: 100%। সিএসএস মোড়ানোর পাঠ্য আইই তে কাজ করছে না

Comments

আমাকে প্রস্থ যুক্ত করতে হয়েছিল: 100%; পিতামাতার কাছে প্রসঙ্গের উপর নির্ভর করে এই বাগটিতে বিভিন্ন ফিক্স রয়েছে বলে মনে হচ্ছে। দীর্ঘশ্বাস!

— ডেনিস জনসন

বরং চিডগুলিতে "সর্বোচ্চ-প্রস্থ: 100%" ব্যবহার করুন।

— টাইলার

আমি একটি টেবিল তৈরি করছি আনমন (প্রতিটি সারি, একটি আনমন এটা সন্তান থাকার সঙ্গে ব্যবহার করছে: flex: 1 1 50%; display: flex; align-items: center;। না আশ্চর্যজনক, ইন্টারনেট যখন কোষে দীর্ঘ গ্রন্থে শব্দ-মোড়কে ব্যর্থ সেট করা হচ্ছে। width:100%কাজ, কিন্তু সেটিং min-width: 100%স্বল্পতা এটা করা উচিত, কিন্তু এটা doesn! t (সকল বিষয় যেমন আই), তাই আমি চেষ্টা করেছি max-width: 99%, এবং width:100%

— আশ্চর্যরূপে

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

একই ধারকটিতে আইটেম সারিবদ্ধ করার জন্য যখন সর্বাধিক প্রস্থ আমার জন্য কাজ করে: ফ্লেক্স-স্টার্ট স্থাপন করা হয়েছিল।

— হার্মস

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

এই সমস্ত সমাধান আমার পক্ষে কার্যকর হয়নি work স্পষ্টভাবে একটি আইই বাগ রয়েছে flex-direction:column।

আমি কেবল এটি সরানোর পরে এটি কাজ করেছিলাম flex-direction:

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

Answer 6

প্রস্তাবিত সমাধানগুলি আমাকে ".চাইল্ড {প্রস্থ: 100%; with" দিয়ে সহায়তা করে না, যেহেতু আমার আরও জটিল মার্কআপ ছিল। তবে, আমি একটি সমাধান পেয়েছি - "সারিবদ্ধ আইটেমগুলি: কেন্দ্র;" সরান, এবং এটি এই ক্ষেত্রেও কাজ করে।

.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

আমিও আমি এই সমস্যার মুখোমুখি হয়েছি।

একমাত্র বিকল্প হ'ল শিশু উপাদানগুলির মধ্যে একটি প্রস্থ (বা সর্বোচ্চ-প্রস্থ) নির্ধারণ করা। আইই 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;
}