নমনীয় আইটেমগুলি অতীতের সামগ্রীর আকার সঙ্কুচিত করে না কেন?

Question

আমার কাছে 4 টি ফ্লেক্সবক্স কলাম রয়েছে এবং সমস্ত কিছুই সূক্ষ্মভাবে কাজ করে, তবে যখন আমি কোনও কলামে কিছু পাঠ্য যুক্ত করি এবং এটি একটি বড় ফন্টের আকারে সেট করি তখন এটি কলামটি বৃহত্তর করে তুলছে যা ফ্লেক্সের সম্পত্তি হওয়ার কারণে হওয়া উচিত।

আমি ব্যবহার করার চেষ্টা করেছি word-break: break-wordএবং এটি সাহায্য করেছে, তবে এখনও আমি যখন কলামটিকে খুব ছোট প্রস্থে আকার দিচ্ছি তখন পাঠ্যের অক্ষরগুলি একাধিক লাইনে বিভক্ত হয়ে যায় (প্রতি লাইনে একটি অক্ষর), এবং তবুও কলামটি একটি অক্ষরের আকারের চেয়ে ছোট প্রস্থ পায় না ।

এই ভিডিওটি দেখুন (শুরুতে, প্রথম কলামটি সবচেয়ে ছোট, তবে যখন আমি উইন্ডোটি পুনরায় আকার দিলাম তখন এটি প্রশস্ত কলাম I আমি কেবল সর্বদা ফ্লেক্স সেটিংসকে সম্মান করতে চাই; ফ্লেক্স আকার 1: 3: 4: 4)

আমি জানি, হরফ-আকার এবং কলাম প্যাডিং আরও ছোট করে সেট করা সাহায্য করবে ... তবে এর বাইরে আর কোনও সমাধান আছে কি?

আমি ব্যবহার করতে পারি না overflow-x: hidden।

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

ফ্লেক্স আইটেমগুলির স্বয়ংক্রিয় ন্যূনতম আকার

আপনি একটি ফ্লেক্সবক্স ডিফল্ট সেটিংস সম্মুখীন করছেন।

একটি ফ্লেক্স আইটেম মূল অক্ষ সহ তার সামগ্রীর আকারের চেয়ে ছোট হতে পারে না।

ডিফল্টগুলি হ'ল ...

• min-width: auto
• min-height: auto

... যথাক্রমে সারি-দিক এবং কলাম-দিকের ফ্লেক্স আইটেমগুলির জন্য।

আপনি এই ডিফল্টগুলিতে ফ্লেক্স আইটেম সেট করে ওভাররাইড করতে পারেন:

• min-width: 0
• min-height: 0
• overflow: hidden(বা অন্য কোনও মান বাদে visible)

---

ফ্লেক্সবক্স স্পেসিফিকেশন

4.5। ফ্লেক্স আইটেমগুলির স্বয়ংক্রিয় ন্যূনতম আকার

ফ্লেক্স আইটেমগুলির জন্য আরও যুক্তিসঙ্গত ডিফল্ট ন্যূনতম আকার সরবরাহ করতে, এই স্পেসিফিকেশনটি সিএসএস ২.১ এ সংজ্ঞায়িত সংখ্যার autoপ্রাথমিক মান min-widthএবং min-heightবৈশিষ্ট্যের প্রাথমিক মান হিসাবে একটি নতুন মান প্রবর্তন করে।

বিষয়ে autoমান ...

একটি আনমন আইটেমটি যার উপর overflowহয় visibleমূল অক্ষ, যখন আনমন আইটেমের মূল অক্ষ মিনিট আকারের সম্পত্তি উল্লিখিত, একটি নির্দিষ্ট করে স্বয়ংক্রিয় নূন্যতম আকারের । এটি অন্যথায় গণনা করে 0।

অন্য কথায়:

• min-width: autoএবং min-height: autoঅক্ষমতা প্রযোজ্য যখন overflowহয় visible।
• যদি overflowমান নয় visible, মিনিট আকারের সম্পত্তির মান 0।
• সুতরাং, এর overflow: hiddenবিকল্প হতে পারে min-width: 0এবং min-height: 0।

এবং...

• সর্বনিম্ন আকারের সাইজিং অ্যালগরিদম কেবলমাত্র মূল অক্ষে প্রয়োগ হয়।
• উদাহরণস্বরূপ, একটি সারি-দিকের ধারকটিতে একটি ফ্লেক্স আইটেম min-height: autoডিফল্টরূপে পায় না ।
• আরও বিশদ ব্যাখ্যার জন্য এই পোস্টটি দেখুন:
  • ন্যূনতম প্রস্থের বিভিন্নভাবে ফ্লেক্স-দিকনির্দেশ: সারি এবং ফ্লেক্স-দিকনির্দেশ: কলামে রেন্ডারিং করা হয়

---

আপনি ন্যূনতম প্রস্থ: 0 প্রয়োগ করেছেন এবং আইটেমটি এখনও সঙ্কুচিত হয় না?

নেস্টেড ফ্লেক্স পাত্রে

আপনি HTML গঠন একাধিক স্তরে আনমন আইটেম সঙ্গে তার আচরণ করে থাকেন, তবে এটি ডিফল্ট ওভাররাইড করার প্রয়োজন হতে পারে min-width: auto/ min-height: autoউচ্চতর স্তরে আইটেম উপর।

মূলত, এর সাথে একটি উচ্চ স্তরের ফ্লেক্স আইটেম min-width: autoনীচে নীচে নেস্ট করা আইটেমগুলিকে সঙ্কুচিত হওয়া রোধ করতে পারে min-width: 0।

উদাহরণ:

• ফ্লেক্স আইটেম এর সামগ্রীর চেয়ে ছোট সঙ্কোচিত হয় না
• সন্তানের পিতামাতার মধ্যে ফিট করা
• হোয়াইট স্পেস সিএসটি সম্পত্তি নমনীয়তা নিয়ে সমস্যা তৈরি করছে

---

ব্রাউজার রেন্ডারিং নোটস

• ক্রোম বনাম ফায়ারফক্স / এজ

  কমপক্ষে 2017 সাল থেকে, দেখা যাচ্ছে যে ক্রোম হয় হয় (1) min-width: 0/ min-height: 0ডিফল্টে ফিরে আসে , বা (2) 0একটি রহস্য অ্যালগরিদমের ভিত্তিতে নির্দিষ্ট পরিস্থিতিতে ডিফল্টগুলি স্বয়ংক্রিয়ভাবে প্রয়োগ করে applying (এটি এগুলি হতে পারে যা তারা হস্তক্ষেপ বলে many) ফলস্বরূপ, অনেক লোক তাদের লেআউটটি (বিশেষত কাঙ্ক্ষিত স্ক্রোলবারগুলি) ক্রোমে প্রত্যাশিত কাজ দেখছেন, তবে ফায়ারফক্স / এজ এ নয়। এই সমস্যাটি এখানে আরও বিশদে আচ্ছাদিত রয়েছে: ফায়ারফক্স এবং ক্রোমের মধ্যে তাত্পর্য সঙ্কুচিত

• IE11

  হিসাবে বৈশিষ্ট উল্লেখ করা হয়েছে, autoমান min-widthএবং min-heightবৈশিষ্ট্য "নতুন" হয়। এর অর্থ এই যে কিছু ব্রাউজার এখনও একটি রেন্ডার করতে পারে 0, ডিফল্ট অনুসারে মান কারণ তারা আনমন বিন্যাস বাস্তবায়িত সামনে মান আপডেট করা হয়েছে এবং কারণ 0জন্য প্রারম্ভিক মান min-widthএবং min-heightএ সিএসএস 2.1 । যেমন একটি ব্রাউজার আইই 11। অন্যান্য ব্রাউজারগুলি ফ্লেক্সবক্স অনুচ্ছেদেauto বর্ণিত হিসাবে আরও নতুন মানটিতে আপডেট হয়েছে ।

---

সংশোধিত ডেমো

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

Comments

আমার ডমটিতে একটি <ফিল্ডসেট> পিতামাতাদের ট্যাগটি অনেক বেশি ছিল যা একই সমস্যার কারণ হয়েছিল। এর ন্যূনতম প্রস্থকে 0 এ সেট করা এটি স্থির করে।

— জান সোয়ার্ট

এটি সম্পর্কে কোনও চিন্তা: stackoverflow.com/a/36247448/8620333 .. আমি খুঁজে পেয়েছি এটি করতে হবে min-widthতবে সমস্ত বিবরণ সম্পর্কে সত্যই নিশ্চিত নয়।

— তেমনী আফিফ

দেখে মনে হচ্ছে ক্রোম v73 এ আচরণটি পরিবর্তিত করে সামগ্রীটির চেয়ে ছোট সঙ্কুচিত না হয়।

— maccam94

একই ফিক্স সঙ্গে কাজ min-height: 0;। গাছের বেশ কয়েকটি উচ্চতর উপাদানের জন্য আমাকে এটি সেট করার চেষ্টা করতে হয়েছিল।

— বেন হুইলার

min-height: 0;এটি কাজ করতে আমাকে 10 টি স্থানে সেট করতে হয়েছিল। আপনাকে ধন্যবাদ, ধন্যবাদ, দুর্দান্ত টিপের জন্য আপনাকে ধন্যবাদ!

— dave0688