আমি কীভাবে ফ্লেক্সবক্স বাচ্চাদের তাদের পিতামাতার 100% উচ্চতা তৈরি করতে পারি?

Question

আমি একটি ফ্লেক্সবক্সের অভ্যন্তরে একটি ফ্লেক্স আইটেমের উল্লম্ব স্থান পূরণ করার চেষ্টা করছি।

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

এবং এখানে জেএসফিডাল

flex-2-child দুটি ক্ষেত্রে বাদে প্রয়োজনীয় উচ্চতা পূরণ করে না যেখানে:

1. flex-2 উচ্চতা 100% (যা অদ্ভুত কারণ একটি ফ্লেক্স আইটেমের ডিফল্টরূপে 100% থাকে + এটি ক্রোমে বগি হয়)
2. flex-2-child একটি অবস্থান নিখুঁত যা অসুবিধাজনকও রয়েছে

এটি বর্তমানে ক্রোম বা ফায়ারফক্সে কাজ করে না।

Comments

উচ্চতা ব্যবহারে সমস্যা কী: 100%; .ফ্লেক্স -২ এর জন্য?

— rmagnum2002

এটি নমনীয় আইটেমটির উদ্দেশ্যটিকে অস্বীকার করে যা সামগ্রী নিজেই পূরণ করা এবং এটি আমাকে ক্রোমের সবচেয়ে অদ্ভুত বাগ দিচ্ছে যেখানে যখনই আমি উইন্ডোর আকার পরিবর্তন করি তখন উচ্চতা শূন্যে ফিরে যায়

— রাজ

প্রকৃতপক্ষে, ফায়ারফক্সের সর্বশেষতম সংস্করণটি কেবলমাত্র সঠিকভাবে কাজ করছে

— রাজ

: বর্তমানে সেখানে ব্রাউজার মধ্যে আচরণের উল্লেখযোগ্য পার্থক্য যখন এটি flexbox মধ্যে রেন্ডারিং শতাংশ উচ্চতা আসে stackoverflow.com/a/35537510/3597276

— মাইকেল বেঞ্জামিন

হ্যাঁ, ক্রোমের কিছু সমস্যা রয়েছে, বিশেষত নেস্টেড ফ্লেক্সবক্সগুলি। উদাহরণস্বরূপ, আমি বাচ্চাদের সাথে নেস্টেড ফ্লেক্স বক্স পেয়েছি height:100%তবে তারা পরিবর্তে প্রাকৃতিক উচ্চতার সাথে রেন্ডার করছে। এবং আশ্চর্যের বিষয় হ'ল আমি যদি তাদের উচ্চতাগুলিতে পরিবর্তন করি autoতবে তারা সেভাবে রেন্ডার করে height:100%যা আমি করার চেষ্টা করছিলাম। এটি যদি কাজ করে তবে অবশ্যই এটি স্বজ্ঞাত নয়।

— trusktr

Answer 1

ব্যবহার align-items: stretch

ডেভিড স্টোরির উত্তরের মতো, আমার কাজটি হ'ল:

.flex-2 {
    display: flex;
    align-items: stretch;
}

বিকল্পভাবে align-items, আপনি প্রসারিত করতে চাইছেন align-selfএমন .flex-2-childআইটেমটি ব্যবহার করতে পারেন ।

Comments

stretch: এটি নির্বাচিত উত্তর হওয়া উচিত।

— ডেভ এভারিট

অবশ্যই এটি প্রশ্নের উত্তরের উত্তর। পুরোপুরি কাজ করে।

— মার্সিয়াস

হ্যাঁ, এটি প্রকৃতপক্ষে এই প্রশ্নের সেরা উত্তর।

— vইভিন্দ ব্রুথিন

height: 100%বাচ্চাদের যে উপাদানটি আপনি পিতামাতার মতো একই উচ্চতায় যেতে চান তা থেকেও সরিয়ে দিতে ভুলবেন না

— ইলহাম ওহাবী জিএক্স

দয়া height: 100%করে উত্তরে যুক্ত করুন - আমি প্রায় ছেড়ে দিয়েছি এবং কেবল ফিরে যাওয়ার আগে শেষ মুহুর্তে এটি দেখেছি absolute- যা সমস্ত ধরণের সমস্যার সাথে আসে।

— পিটার

Answer 2

আমি এখানে একটি অনুরূপ প্রশ্নের উত্তর দিয়েছেন ।

আমি জানি আপনি ইতিমধ্যে বলেছেন position: absolute;অসুবিধাজনক তবে এটি কার্যকর। পুনরায় আকার ইস্যু ঠিক করার বিষয়ে আরও তথ্যের জন্য নীচে দেখুন।

একটি ডেমো জন্য এই jsFiddle দেখুন , যদিও আমি কেবল ওয়েবকিট উপসর্গগুলি ক্রোমে খোলা রেখেছি।

আপনার মূলত 2 টি সমস্যা রয়েছে যা আমি আলাদাভাবে ডিল করব।

1. উচ্চতা 100% পূরণ করার জন্য একটি নমনীয় আইটেমের সন্তানের প্রাপ্তি
   • position: relative;সন্তানের পিতামাতার উপর সেট করুন।
   • position: absolute;সন্তানের উপর সেট করুন।
   • তারপরে আপনি প্রস্থ / উচ্চতা প্রয়োজনীয় হিসাবে সেট করতে পারেন (আমার নমুনায় 100%)।
2. ক্রোমে পুনরায় আকার স্ক্রোলিং "তাত্পর্য" ঠিক করা
   • overflow-y: auto;স্ক্রোলযোগ্য ডিভ রাখুন ।
   • স্ক্রোলযোগ্য ডিভের অবশ্যই একটি স্পষ্ট উচ্চতা নির্দিষ্ট করতে হবে। আমার নমুনার ইতিমধ্যে উচ্চতা 100% রয়েছে তবে যদি ইতিমধ্যে কোনওটি প্রয়োগ না করা হয় তবে আপনি উল্লেখ করতে পারেনheight: 0;

স্ক্রোলিং ইস্যুতে আরও তথ্যের জন্য এই উত্তরটি দেখুন ।

Comments

পয়েন্ট 1) ক্রোমে পুরোপুরি কাজ করে, ফায়ারফক্সের অবস্থানের পরম প্রয়োজন হয় না।

— ইউরি

Answer 3

যদি আমি সঠিকভাবে বুঝতে পারি তবে আপনি চান তার পিতামাতার উচ্চতা এবং প্রস্থটি পূরণ করার জন্য আপনি ফ্লেক্স-2-সন্তানের চান, যাতে লাল অঞ্চলটি সবুজ দ্বারা সম্পূর্ণরূপে coveredেকে যায়?

যদি তা হয় তবে ফ্লেক্সবক্সটি ব্যবহারের জন্য আপনাকে কেবল ফ্লেক্স -2 সেট করতে হবে:

.flex-2 {
    display: flex;  
}

তারপরে নমনীয় -2-শিশুকে নমনীয় হতে বলুন:

.flex-2-child {    
    flex: 1;
}

Http://jsfiddle.net/2ZDuE/10/ দেখুন

কারণটি হ'ল ফ্লেক্স-2-শিশু কোনও ফ্লেক্সবক্স আইটেম নয়, তবে এর পিতামাতা।

Comments

100% এবং প্রতিটি শিশু 50/50 এর উচ্চতা সহ আমি কীভাবে এটি করতে পারি?

— রিকি লেভি

সচেতন হন যে আপনি যদি "সারিবদ্ধ আইটেমগুলি: কেন্দ্র" ব্যবহার করেন তবে আপনি এই ফিক্সটি ব্যবহার করতে পারবেন না যেহেতু আপনার আইটেমগুলি এখন সমান উচ্চতায় পরিণত হবে।

— নীল মনরো

@ নীলমনরো আপনি এখনও একটি শিশু ব্যবহার align-items: centerকরলে আপনি এখনও ব্যবহার করতে পারবেন align-self: stretch।

— বিটি

হাই @ ডেভিড, আমি আপনার সমাধানটি চেষ্টা করেছি, এটি ফ্লেক্স-দিকনির্দেশের জন্য দুর্দান্ত কাজ করে: সারি বিন্যাস, এটি ফ্লেক্স-দিকনির্দেশ: কলাম লেআউটের সাথে কাজ করছে না বলে মনে হচ্ছে বা কোডটিতে আমার কোনও স্থান ভুল আছে। আপনি কি এই পরীক্ষা করতে সাহায্য করতে পারেন এই ফ্রিডল jsfiddle.net/78o54Lmv এ , অভ্যন্তরীণ বাক্সটি তার পিতামাতার পুরো উচ্চতা দখল করবে না?

— হুয়ান ফেং

আমি যোগ আছে min-height: 100vh;করার .flex-2উপাদান এটি কাজ করে না। সাহায্যের জন্য ধন্যবাদ!

— Tenaciousd93

Answer 4

আমি অনুমান করি যে ক্রোমের আচরণ সিএসএস অনুমানের সাথে আরও সামঞ্জস্যপূর্ণ (যদিও এটি স্বল্প স্বজ্ঞাত)। ফ্লেক্সবক্স অনুমান অনুসারে stretch, align-selfসম্পত্তির ডিফল্ট মান কেবলমাত্র উপাদানটির "ক্রস সাইজের সম্পত্তি" ( heightএই ক্ষেত্রে) এর ব্যবহৃত ব্যবহৃত মান পরিবর্তন করে । এবং, আমি CSS2.1 স্পেসটি বুঝতে পেরেছি , শতাংশের উচ্চতা তার ব্যবহৃত মান নয়, পিতামাতার নির্দিষ্ট মান থেকে গণনা heightকরা হয়। পিতামাতার নির্দিষ্ট মান heightকোনও ফ্লেক্স বৈশিষ্ট্য দ্বারা প্রভাবিত হয় না এবং এখনও রয়েছে auto।

স্পষ্ট সেট height: 100%করে তোলে আনুষ্ঠানিকভাবে সম্ভব শুধু সেটিং মত সন্তান শতাংশ উচ্চতা নিরূপণ করা, height: 100%থেকে htmlএটা সম্ভব শতাংশ উচ্চতা নিরূপণ করে তোলে bodyCSS2.1 হবে।

Comments

একদম ঠিক! এটিকে অনুশীলন করতে, কেবল যুক্ত height:100%করুন .flex-2। এখানে jsfiddle ।

— কোর্টডেমোন

ক্রোমের আচরণ সিএসএস অনুমানের ক্রোম টিমের ব্যাখ্যার সাথে আরও সামঞ্জস্যপূর্ণ । যদিও এটি সেভাবে ব্যাখ্যা করা যেতে পারে, এর ব্যাখ্যার আরও অনেক ভাল উপায় রয়েছে, যেগুলির কোনওটিই আমাদের এই বাজারে আটকাতে না পারে, বিরক্তিকর এবং বেআইনী আচরণ করে। তাদের আরও বেশি করে এটি চিন্তা করা উচিত ছিল।

— WraithKenny

@ রিকডোসবার্গ, এটি এক বছরেরও বেশি আগে ছিল, তবে আমি বিশ্বাস করি যে আমাকে স্থির উচ্চতার উপাদানগুলি অবলম্বন করতে হয়েছিল। আমি আশা করি এই ব্রাউজারগুলি তাদের ক্রিয়াকলাপ একসাথে মিলবে। আমি সত্যিই মোবাইল স্পেসটি অপছন্দ করতে শুরু করি।

— জর্দান

উল্লম্ব ফ্লেক্সবক্স ধারকের একটি শিশুকে সেট করা ক্রোমে height: 100%আমার জন্য খুব বিজোড় ফলাফল দিচ্ছে। দেখে মনে হচ্ছে এটি উপাদানটির উচ্চতার চেয়ে কন্টেইনারটির মোট উচ্চতায় সেট করা "নির্দিষ্ট উচ্চতা" সৃষ্টি করে, সুতরাং অন্য উপাদানগুলির সাথে সম্পর্কিত আকারের গণনা করা হলে অযাচিত স্ক্রোলিং ঘটায়।

— জুলে

Answer 5

সমাধানটি আমি নিজেই পেয়েছি, মনে করুন আপনার নীচে সিএসএস রয়েছে:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

এই ক্ষেত্রে, উচ্চতা 100% নির্ধারণ করা কার্যকর হবে না, তাই আমি যা করি তা margin-bottomনিয়মটি সেট করা হয় auto, যেমন:

.child {
  margin-bottom: auto;
}

এবং সন্তানের পিতামাতার শীর্ষে সারিবদ্ধ করা হবে, আপনি align-selfযদি চান তবে আপনি নিয়মটিও ব্যবহার করতে পারেন ।

.child {
  align-self: flex-start;
}

Comments

একটি দুর্দান্ত হ্যাক, তবে সমস্যাটি হ'ল: যদি শিশুটি একটি সাইডবার হয় এবং এটির পটভূমির রঙ থাকে তবে মার্জিন স্থানটি সাদা।

— বোরিস বুর্কভো

এই সমাধানটি সম্পর্কে দুর্দান্ত যে পিতামাতার উচ্চতা গতিময় হতে পারে! পূর্ববর্তী সমাধানগুলির জন্য পিতামাতার একটি নির্দিষ্ট উচ্চতা থাকা দরকার। এর জন্য ধন্যবাদ.

— ঘুষ

Answer 6

একটি ধারণাটি হ'ল এটি display:flex;দিয়ে ডিভটি flex-direction: row;পূরণ করা containerহয় .flex-1এবং .flex-2এটির অর্থ এই নয় যে .flex-2এটি height:100%;সম্পূর্ণ উচ্চতা পর্যন্ত প্রসারিত হওয়া এবং একটি শিশু উপাদান ( .flex-2-child) সহ height:100%;আপনার পিতামাতাকে সেট করতে height:100%;বা ব্যবহার করতে হবে এমনকি এটির একটি ডিফল্ট রয়েছে display:flex;সঙ্গে flex-direction: row;উপর .flex-2dIV আছে খুব।

আমি যা জানি তা থেকে display:flexআপনার সমস্ত সন্তানের উপাদানগুলির উচ্চতা 100% পর্যন্ত প্রসারিত হবে না।

একটি ছোট ডেমো থেকে উচ্চতা মুছে .flex-2-childএবং ব্যবহৃত display:flex;উপর .flex-2: http://jsfiddle.net/2ZDuE/3/

Answer 7

এইচটিএমএল

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

Answer 8

align-self: stretch;আমরা প্রসারিত হতে চাই এমন উপাদানগুলির সাথে এটিও সমাধান করা যেতে পারে।

কখনও কখনও এটি একটি ফ্লেক্সবক্স সেটআপে কেবল একটি আইটেম প্রসারিত করা আকাঙ্ক্ষিত।

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Answer 9

.কন্টেইনার {। । । । সারিবদ্ধ-আইটেম: প্রসারিত; । । । । }

Comments

স্ট্যাকওভারফ্লোতে স্বাগতম। আপনার উত্তরটি সম্পূর্ণরূপে ব্যাখ্যা করতে হবে এবং এটি কী অবদান রাখে তা বিদ্যমান উত্তরগুলির চেয়ে আলাদা। দেখুন stackoverflow.com/help/how-to-answer

— Simon.SA

আপনার উত্তরটি বিটি-র হিসাবে একই বলে মনে হচ্ছে (তিন বছরের প্রথম দিকে লিখিত) তবে আরও খারাপভাবে প্রকাশ করা হয়েছে।

— কোয়ান্টিন

Answer 10

এটি আমার সমাধানটি ব্যবহার করে CSS +

প্রথমত যদি প্রথম সন্তানের (ফ্লেক্স -1) 100px হওয়া উচিত তবে ফ্লেক্স হওয়া উচিত নয়। ইন CSS + + আসলে আপনি নমনীয় এবং / অথবা স্ট্যাটিক উপাদান (কলাম বা সারি) এবং আপনার উদাহরণে এই হিসাবে সহজ হয়ে সেট করতে পারেন:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

ধারক সিএসএস:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

এবং স্পষ্টত অন্তর্ভুক্ত CSS + 0.2 কোর

বেড়া শুনুন