ক্রোম / সাফারি ফ্লেক্স প্যারেন্টের 100% উচ্চতা পূরণ করে না

Question

আমি একটি নির্দিষ্ট উচ্চতা সহ একটি উল্লম্ব মেনু পেতে চাই।

প্রতিটি সন্তানের অবশ্যই পিতামাতার উচ্চতা পূরণ করতে হবে এবং মাঝারি প্রান্তিক পাঠ্য থাকতে হবে।

বাচ্চাদের সংখ্যা এলোমেলো, তাই আমাকে গতিশীল মানগুলির সাথে কাজ করতে হবে।

ডিভিতে .containerএকটি এলোমেলো সংখ্যক বাচ্চা ( .item) থাকে যা সর্বদা পিতামাতার উচ্চতা পূরণ করতে হয়। এটি অর্জনে আমি ফ্লেক্সবক্স ব্যবহার করেছি।

মাঝখানে প্রান্তযুক্ত পাঠ্যের সাথে লিঙ্কগুলি তৈরি করার জন্য আমি display: table-cellকৌশলটি ব্যবহার করছি । তবে টেবিল প্রদর্শনগুলির জন্য উচ্চতা 100% ব্যবহার করা দরকার।

আমার সমস্যাটি হ'ল .item-inner { height: 100% }ওয়েবকিট (ক্রোম) এ কাজ করছে না।

1. এই সমস্যার কি কোনও সমাধান আছে?
2. বা .itemপাঠ্য উল্লম্ব মাঝখানে সারিবদ্ধভাবে সমস্ত পিতামাতার উচ্চতা পূরণ করার জন্য কী আলাদা কৌশল আছে ?

এখানে jsFizz উদাহরণ, ফায়ারফক্স এবং ক্রোমে দেখা উচিত

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

Comments

এটি এখন ঠিক করা হয়েছে - বাগস.ক্রোমিয়াম.আর

— পি

এটি ওপির সাথে বিশেষভাবে প্রাসঙ্গিক নয়, তবে "সাফারি প্রদর্শনের পরম উচ্চতায় 100% কাজ করে না" বা এর অনুরূপ কোনও কিছুর জন্য এখানে অবতরণকারী গুগলদের ক্ষেত্রে এটি প্রাসঙ্গিক হতে পারে। আমার কাছে একটি ফ্লেক্স পাত্রে এটির মতো উপাদান রয়েছে এবং এটি নির্দিষ্ট করতে হয়েছিল top:0এবং left:0এটি প্রত্যাশার মতো প্রদর্শিত হয়েছিল।

— আলেকজমা

: @vsync এখনো নির্ধারণ করা হয় নাই stackoverflow.com/questions/46226298/...

— TylerH

Answer 1

সমাধান

নেস্টেড ফ্লেক্স পাত্রে ব্যবহার করুন।

শতাংশের উচ্চতা থেকে মুক্তি পান। টেবিলের বৈশিষ্ট্যগুলি থেকে মুক্তি পান। পরিত্রাণ পেতে vertical-align। পরম অবস্থান থেকে বিরত থাকুন। সারা পথ ধরে কেবল ফ্লেক্সবক্সের সাথে লেগে থাকুন।

display: flexফ্লেক্স আইটেমটিতে প্রয়োগ করুন ( .item) এটি একটি ফ্লেক্স ধারক করে তোলে। এটি স্বয়ংক্রিয়ভাবে সেট হয়ে যায় align-items: stretch, যা শিশুকে ( .item-inner) পিতামাতার পূর্ণ উচ্চতা প্রসারিত করতে বলে ।

গুরুত্বপূর্ণ: এই পদ্ধতির কাজ করার জন্য ফ্লেক্স আইটেমগুলি থেকে নির্দিষ্ট উচ্চতাগুলি সরান। যদি কোনও সন্তানের উচ্চতা নির্দিষ্ট করা থাকে (উদাঃ height: 100%), তবে এটি align-items: stretchপিতামাতার কাছ থেকে আসা অগ্রাহ্য করবে । জন্য stretchকাজ ডিফল্ট, সন্তানের উচ্চতা গনা আবশ্যক auto (সম্পূর্ণ ব্যাখ্যা )।

এটি চেষ্টা করুন (এইচটিএমএলে কোনও পরিবর্তন নেই):

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

jsFizz ডেমো

---

ব্যাখ্যা

আমার সমস্যাটি হ'ল .item-inner { height: 100% }ওয়েবকিট (ক্রোম) এ কাজ করছে না।

এটি কাজ করছে না কারণ আপনি শতাংশের উচ্চতা এমনভাবে ব্যবহার করছেন যা অনুমানের traditionalতিহ্যগত প্রয়োগের সাথে খাপ খায় না।

10.5 সামগ্রীর উচ্চতা: heightসম্পত্তি

শতাংশ শতাংশ
শতাংশ উচ্চতা নির্দিষ্ট করে। শতাংশটি উত্পন্ন বাক্সযুক্ত ব্লকটির উচ্চতার ক্ষেত্রে গণনা করা হয়। যদি ধারণকৃত ব্লকের উচ্চতাটি স্পষ্টভাবে নির্দিষ্ট না করা হয় এবং এই উপাদানটি একেবারে অবস্থান না করে তবে মানটি গণনা করে auto।

স্বয়ংক্রিয়তা
উচ্চতা অন্যান্য বৈশিষ্ট্যের মানগুলির উপর নির্ভর করে।

অন্য কথায়, ইন-ফ্লো শিশুতে কাজ করার জন্য শতাংশের উচ্চতার জন্য, পিতামাতার অবশ্যই একটি উচ্চতা নির্ধারণ করতে হবে ।

আপনার কোডে, শীর্ষ স্তরের ধারকটির একটি সংজ্ঞায়িত উচ্চতা রয়েছে: .container { height: 20em; }

তৃতীয় স্তরের ধারকটির একটি সংজ্ঞায়িত উচ্চতা রয়েছে: .item-inner { height: 100%; }

কিন্তু তাদের মধ্যে, দ্বিতীয় স্তরের ধারক - .item- না একটি নির্ধারিত উচ্চতা আছে। ওয়েবকিট এটি অনুপস্থিত লিঙ্ক হিসাবে দেখছে sees

.item-innerক্রোমকে বলছে: আমাকে দাওheight: 100% । ক্রোম .itemরেফারেন্সের জন্য পিতামাতাকে ( ) সন্ধান করে এবং প্রতিক্রিয়া জানায়: এর 100% কী? আমি কিছুই দেখতে পাচ্ছি না ( flex: 1সেখানে থাকা নিয়মটি উপেক্ষা করে )। ফলস্বরূপ, height: autoস্পেক অনুসারে এটি প্রয়োগ করা হয় (সামগ্রীর উচ্চতা)।

অন্যদিকে, ফায়ারফক্স এখন সন্তানের শতাংশের উচ্চতার রেফারেন্স হিসাবে পিতামাতার ফ্লেক্স উচ্চতা গ্রহণ করে। আইই 11 এবং এজ এছাড়াও ফ্লেক্স উচ্চতা গ্রহণ করে।

এছাড়াও, (কোনও সংখ্যাসূচক মান কাজ করে ( হবে না) সহ ) ব্যবহৃত হলে ক্রম flex-growপর্যাপ্ত পিতামাতার রেফারেন্স হিসাবে গ্রহণ করবে । এই লেখার হিসাবে, তবে, এই সমাধানটি সাফারিতে ব্যর্থ।flex-basisautoflex-basis: 0

#outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: white;
  border: 1px solid red;
}
#middle {
  flex-grow: 1;
  flex-basis: 1px;
  background-color: yellow;
}
#inner {
  height: 100%;
  background-color: lightgreen;
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>

---

চারটি সমাধান

1. সমস্ত মূল উপাদানগুলির উপর একটি উচ্চতা উল্লেখ করুন

সমস্ত নির্ভরযোগ্য উপাদানগুলির উপর একটি উচ্চতা নির্দিষ্ট করা একটি নির্ভরযোগ্য ক্রস ব্রাউজার সমাধান। এটি নিখোঁজ লিঙ্কগুলি প্রতিরোধ করে, যা ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি অনুমানের লঙ্ঘন বিবেচনা করে।

নোট করুন min-heightএবং max-heightগ্রহণযোগ্য নয়। এটা heightসম্পত্তি হতে হবে ।

এখানে আরও বিশদ: সিএসএসের heightসম্পত্তি এবং শতাংশের মানগুলির সাথে কাজ করা

২. সিএসএস সম্পর্কিত এবং সম্পূর্ণ অবস্থান নির্ধারণ osition

position: relativeপিতা-মাতার এবং position: absoluteসন্তানের ক্ষেত্রে প্রয়োগ করুন ।

আকার সঙ্গে শিশু height: 100%এবং width: 100%, বা ব্যবহারের অফসেট বৈশিষ্ট্য: top: 0, right: 0, bottom: 0, left: 0।

পরম অবস্থানের সাথে, শতাংশের উচ্চতা পিতামাতার উপরে নির্দিষ্ট উচ্চতা ছাড়াই কাজ করে।

৩. অপ্রয়োজনীয় এইচটিএমএল পাত্রে সরান (প্রস্তাবিত)

চারপাশে দুটি পাত্রে buttonকী দরকার ? কেন .itemবা .item-inner, বা উভয়ই সরাবেন না ? যদিও buttonউপাদানগুলি কখনও কখনও ফ্লেক্স পাত্রে হিসাবে ব্যর্থ হয় তবে তারা ফ্লেক্স আইটেম হতে পারে। বা তার buttonসন্তান তৈরি করা এবং অবহেলিত মার্ক-আপ সরিয়ে ফেলার কথা বিবেচনা করুন ।.container.item

এখানে একটি উদাহরণ:

.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}

<div class="container">
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>

4. নেস্টেড ফ্লেক্স পাত্রে (প্রস্তাবিত)

শতাংশের উচ্চতা থেকে মুক্তি পান। টেবিলের বৈশিষ্ট্যগুলি থেকে মুক্তি পান। পরিত্রাণ পেতে vertical-align। পরম অবস্থান থেকে বিরত থাকুন। সারা পথ ধরে কেবল ফ্লেক্সবক্সের সাথে লেগে থাকুন।

display: flexফ্লেক্স আইটেমটিতে প্রয়োগ করুন ( .item) এটি একটি ফ্লেক্স ধারক করে তোলে। এটি স্বয়ংক্রিয়ভাবে সেট হয়ে যায় align-items: stretch, যা শিশুকে ( .item-inner) পিতামাতার পূর্ণ উচ্চতা প্রসারিত করতে বলে ।

গুরুত্বপূর্ণ: এই পদ্ধতির কাজ করার জন্য ফ্লেক্স আইটেমগুলি থেকে নির্দিষ্ট উচ্চতাগুলি সরান। যদি কোনও সন্তানের উচ্চতা নির্দিষ্ট করা থাকে (উদাঃ height: 100%), তবে এটি align-items: stretchপিতামাতার কাছ থেকে আসা অগ্রাহ্য করবে । জন্য stretchকাজ ডিফল্ট, সন্তানের উচ্চতা গনা আবশ্যক auto (সম্পূর্ণ ব্যাখ্যা )।

এটি চেষ্টা করুন (এইচটিএমএলে কোনও পরিবর্তন নেই):

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

jsFiddle

Comments

আমি উচ্চতা ব্যবহার করে আমার সমস্যাটি স্থির করেছি: স্বয়ং

— Alfrex92

এই দুর্দান্ত পোস্টের ব্যাখ্যা লিঙ্ক থেকে নেওয়া কিছু মন্তব্য - "সারিবদ্ধ করুন: প্রসারিত করুন" ফ্লেক্স বাচ্চাদের ধারকটির ক্রস অক্ষ জুড়ে প্রসারিত করে তোলে - এটি বাচ্চাদের উচ্চতায় প্রসারিত করা, ফ্লেক্স পাত্রে নমনীয় দিক থাকতে হবে সারি হিসাবে

— সামান্য

আমি নিশ্চিত করতে পারি যে নেস্টেড ফ্লেক্স পাত্রে ব্যবহার করা সবচেয়ে ভাল কাজ করে। আমরা আমাদের মেনুতে নিয়মিতভাবে ফ্লেক্সবক্স ব্যবহার করেছি used ফ্লেক্স: 1 এবং প্রদর্শন: পরিবর্তে অভিভাবক পাত্রে আমরা উচ্চতা ব্যবহার করেছি: কিছু জায়গায় 100% ব্যবহার করে। আমরা সংশ্লিষ্ট সংজ্ঞাগুলি প্রতিস্থাপন করার পরে প্রত্যাশা অনুযায়ী সবকিছুই কাজ করেছিল। ইঙ্গিতটির জন্য ধন্যবাদ @ মিশেল_বি! :)

— ফ্লকবিট

@ জেমস হ্যারিংটন, সিএসএস সময়ের সাথে সাথে বেড়েছে এবং জটিল ;-)

— ডারমাইক

প্রতিটি সমাধানের আলাদা উত্তর হওয়া উচিত। আমি কীভাবে কোনও নির্দিষ্ট সমাধানে এইভাবে ভোট দিতে পারি?

— Jp_

Answer 2

সমাধান: সরান height: 100%মধ্যে .item-ভেতরের যোগ display: flexমধ্যে .item

ডেমো: https://codepen.io/tronghiep92/pen/NvzVoo

Comments

ধন্যবাদ, এটি আমাকে সাহায্য করেছে। ফ্লেক্স বাচ্চারা কি স্বয়ংক্রিয়ভাবে তাদের ধারকটির উচ্চতা নিয়ে প্রসারিত হয়? এই কাজ করে কেন?

— রিজ কেনে

@ রিসেকেনি, হ্যাঁ, আপনার প্রশ্নগুলির জন্য। এটি আমার উত্তরে ব্যাখ্যা করা হয়েছে। সমাধান # 4 দেখুন।

— মাইকেল বেনিয়ামিন

Answer 3

ধারকটিতে একটি নমনীয় বৈশিষ্ট্য নির্দিষ্ট করে আমার জন্য কাজ করেছে:

.container {
    flex: 0 0 auto;
}

এটি নিশ্চিত করে যে উচ্চতা সেট করা আছে এবং কোনওটি বৃদ্ধি পাবে না।

Answer 4

মোবাইল সাফারির জন্য একটি ব্রাউজার ফিক্স রয়েছে। আইওএস ডিভাইসগুলির জন্য আপনাকে ওয়েবেকিট-বক্স যুক্ত করতে হবে ।

যাত্রা।

display: flex;
display: -webkit-box;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
align-items: stretch;

আপনি যদি align-items: stretch;পিতামাতার উপাদানগুলির জন্য সম্পত্তি ব্যবহার height : 100%করেন তবে শিশু উপাদান থেকে এটি সরিয়ে দিন ।

Answer 5

আমি আইওএস 8, 9 এবং 10 এ একই রকম সমস্যা পেয়েছি এবং উপরের তথ্যটি এটি ঠিক করতে পারেনি, তবে আমি এটির উপর কাজ করার এক দিন পরে কোনও সমাধান আবিষ্কার করেছি। মঞ্জুরিপ্রাপ্ত এটি সবার জন্য কার্যকর হবে না তবে আমার ক্ষেত্রে আমার আইটেমগুলি একটি কলামে স্ট্যাক করা ছিল এবং এটির দৈর্ঘ্য 0 টি ছিল যখন এটি সামগ্রীর উচ্চতা হওয়া উচিত ছিল। সিএসএস সারি হতে স্যুইচ করা এবং মোড়কে ইস্যুটি ঠিক করে। এটি কেবলমাত্র যদি আপনার একক আইটেম থাকে এবং সেগুলি স্তুপীকৃত থাকে তবে এটি কাজ করে তবে এটি খুঁজে পেতে আমার একটি দিন লেগেছিল বলে আমি ভেবেছিলাম যে আমার সমাধানটি ভাগ করে নেওয়া উচিত!

.wrapper {
    flex-direction: column; // <-- Remove this line
    flex-direction: row; // <-- replace it with
    flex-wrap: wrap; // <-- Add wrapping
}

.item {
    width: 100%;
}

Answer 6

আমার অনুরূপ বাগ ছিল, তবে উচ্চতার জন্য নির্দিষ্ট সংখ্যা ব্যবহার করার সময় এবং শতাংশের জন্য নয়। এটি দেহের অভ্যন্তরেও একটি ফ্লেক্স ধারক ছিল (যার কোনও নির্দিষ্ট উচ্চতা নেই)। এটি উপস্থিত হয়েছিল যে সাফারিতে, আমার ফ্লেক্স ধারকটির কোনও কারণে কোনও উচ্চতা 9px ছিল তবে অন্য সমস্ত ব্রাউজারগুলিতে এটি স্টাইলশিটে নির্দিষ্ট 100px উচ্চতা প্রদর্শিত হয়েছিল।

আমি CSS ক্লাসে সম্পত্তি heightএবং min-heightবৈশিষ্ট্য দুটি যোগ করে এটি কাজ করতে সক্ষম হয়েছি ।

নিম্নলিখিতগুলি আমার জন্য সাফারি 13.0.4 এবং ক্রোম 79.0.3945.130 উভয় ক্ষেত্রেই কাজ করেছে:

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  height: 100px;
}

আশাকরি এটা সাহায্য করবে!