क्रोम / सफारी फ्लेक्स पैरेंट की 100% ऊंचाई को नहीं भरते हैं

Question

मैं एक विशिष्ट ऊंचाई के साथ एक ऊर्ध्वाधर मेनू रखना चाहता हूं।

प्रत्येक बच्चे को माता-पिता की ऊंचाई को भरना चाहिए और मध्य-संरेखित पाठ होना चाहिए।

बच्चों की संख्या यादृच्छिक है, इसलिए मुझे गतिशील मूल्यों के साथ काम करना होगा।

डिव .containerमें बच्चों की एक यादृच्छिक संख्या होती है ( .item) जिसमें हमेशा माता-पिता की ऊंचाई को भरना होता है। यह प्राप्त करने के लिए कि मैंने flexbox का उपयोग किया है।

बीच में पाठ के साथ लिंक बनाने के लिए मैं display: table-cellतकनीक का उपयोग कर रहा हूं । लेकिन टेबल डिस्प्ले का उपयोग करने के लिए ऊंचाई 100% का उपयोग करने की आवश्यकता होती है।

मेरी समस्या यह है कि .item-inner { height: 100% }वेबकिट (क्रोम) में काम नहीं कर रहा है।

1. क्या इस समस्या का कोई हल है?
2. या क्या .itemमाता-पिता की ऊंचाई को मध्य में संरेखित पाठ ऊर्ध्वाधर के साथ भरने के लिए एक अलग तकनीक है ?

यहाँ उदाहरण jsFiddle, फ़ायरफ़ॉक्स और क्रोम में देखा जाना चाहिए

.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

अब इसे ठीक कर दिया गया है - Bugs.chromium.org/p/chromium/issues/detail?id=426898

— vsync

यह विशेष रूप से ओपी के लिए प्रासंगिक नहीं है, लेकिन "सफारी प्रदर्शन पूर्ण ऊंचाई 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 (पूर्ण स्पष्टीकरण ) के लिए गणना करनी चाहिए ।

इसे आज़माएं (HTML में कोई परिवर्तन नहीं):

.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 डेमो

---

व्याख्या

मेरी समस्या यह है कि .item-inner { height: 100% }वेबकिट (क्रोम) में काम नहीं कर रहा है।

यह काम नहीं कर रहा है क्योंकि आप प्रतिशत ऊंचाई का उपयोग इस तरह से कर रहे हैं जो कल्पना के पारंपरिक कार्यान्वयन के अनुरूप नहीं है।

10.5 सामग्री ऊंचाई: heightसंपत्ति

प्रतिशत
एक प्रतिशत ऊंचाई निर्दिष्ट करता है। प्रतिशत की गणना उत्पन्न बॉक्स की ऊंचाई के संबंध में की जाती है। यदि युक्त ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है और यह तत्व पूरी तरह से तैनात नहीं है, तो मान गणना करता है auto।

ऑटो
ऊँचाई अन्य गुणों के मूल्यों पर निर्भर करती है।

दूसरे शब्दों में, इन-फ्लो बच्चे पर काम करने के लिए प्रतिशत ऊंचाई के लिए, माता-पिता के पास एक निश्चित ऊंचाई होनी चाहिए ।

आपके कोड में, शीर्ष-स्तरीय कंटेनर में एक परिभाषित ऊँचाई होती है: .container { height: 20em; }

तीसरे स्तर के कंटेनर में एक परिभाषित ऊंचाई होती है: .item-inner { height: 100%; }

लेकिन उनके बीच, दूसरे स्तर के कंटेनर - .item- में एक परिभाषित ऊंचाई नहीं है। वेबकिट एक लापता लिंक के रूप में देखता है।

.item-innerChrome को बता रहा है: मुझे दे दोheight: 100% । .itemसंदर्भ के लिए Chrome माता-पिता को देखता है ( उत्तर देता है): 100% क्या? मुझे कुछ भी दिखाई नहीं दे रहा है ( flex: 1नियम की अनदेखी )। नतीजतन, यह height: autoकल्पना के अनुसार (सामग्री ऊंचाई) लागू होता है ।

दूसरी ओर, फ़ायरफ़ॉक्स, अब बच्चे के प्रतिशत की ऊँचाई के संदर्भ के रूप में माता-पिता के लचीले कद को स्वीकार करता है। IE11 और एज फ्लेक्स हाइट्स को भी स्वीकार करते हैं।

साथ ही, यदि कोई (कोई संख्यात्मक मान कार्य ( नहीं) सहित ) के साथ संयोजन में उपयोग किया जाता है , तो क्रोम 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संपत्ति होनी चाहिए ।

यहां अधिक विवरण: CSS heightसंपत्ति और प्रतिशत मूल्यों के साथ कार्य करना

2. सीएसएस सापेक्ष और पूर्ण स्थिति

position: relativeमाता-पिता और position: absoluteबच्चे पर लागू करें ।

आकार के साथ बच्चे height: 100%और width: 100%, या का उपयोग ऑफसेट गुण: top: 0, right: 0, bottom: 0, left: 0।

पूर्ण स्थिति के साथ, पैरेंट पर निर्दिष्ट ऊंचाई के बिना प्रतिशत ऊंचाई काम करती है।

3. अनावश्यक HTML कंटेनर निकालें (अनुशंसित)

क्या चारों ओर दो कंटेनरों की आवश्यकता है 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 (पूर्ण स्पष्टीकरण ) के लिए गणना करनी चाहिए ।

इसे आज़माएं (HTML में कोई परिवर्तन नहीं):

.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

मैंने ऊंचाई का उपयोग करके अपना मुद्दा तय किया:

— अल्फ़्रेक्स 92

इस महान पोस्ट के स्पष्टीकरण लिंक से ली गई कुछ टिप्पणी - "संरेखित-आइटम: खिंचाव" फ्लेक्स बच्चों को कंटेनर के क्रॉस अक्ष पर विस्तारित करने के लिए बनाता है - जो कि बच्चों को ऊंचाई तक खींचना है, फ्लेक्स कंटेनर में फ्लेक्स-दिशा होनी चाहिए पंक्ति के रूप में।

— छोटविहाट

मैं पुष्टि कर सकता हूं कि नेस्टेड फ्लेक्स कंटेनर का उपयोग करना सबसे अच्छा काम करता है। हमने अपने मेनू में फ्लेक्सबॉक्स असंगत रूप से उपयोग किया। फ्लेक्स का उपयोग करने के बजाय: 1 और प्रदर्शन: मूल कंटेनर पर फ्लेक्स हमने ऊंचाई का उपयोग किया: कुछ स्थानों पर 100%। जब हमने संबंधित परिभाषाएँ बदल दीं तो सब कुछ अपेक्षित था। धन्यवाद @Michael_B संकेत के लिए! :)

— flocbit

@JamesHarrington, CSS समय के साथ बढ़ी है और जटिल है; ;-)

— DerMike

प्रत्येक समाधान का एक अलग उत्तर होना चाहिए। मैं इस तरह एक विशिष्ट समाधान में कैसे वोट कर सकता हूं?

— Jp_

Answer 2

समाधान: निकालें height: 100%में .item-भीतरी और जोड़ने display: flexमें .item

डेमो: https://codepen.io/tronghiep92/pen/NvzVoo

Comments

धन्यवाद, इससे मुझे मदद मिली। क्या फ्लेक्स बच्चे स्वचालित रूप से अपने कंटेनर की ऊंचाई तक ले जाते हैं? क्या यही कारण है कि यह काम करता है?

— रीस कैनेई

@ReeceKenney, हाँ, आपके प्रश्नों के लिए। यह मेरे उत्तर में बताया गया है। समाधान # 4 देखें।

— माइकल बेंजामिन

Answer 3

कंटेनर के लिए एक फ्लेक्स विशेषता निर्दिष्ट करना मेरे लिए काम किया:

.container {
    flex: 0 0 auto;
}

यह सुनिश्चित करता है कि ऊँचाई निर्धारित है और वह नहीं बढ़ती है।

Answer 4

मोबाइल सफारी के लिए एक ब्राउज़र फिक्स है। आपको iOS उपकरणों के लिए -webkit-box को जोड़ना होगा ।

पूर्व।

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

IOS 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 ऊँचाई प्रदर्शित करता था।

मैं सीएसएस वर्ग में heightऔर min-heightगुण दोनों को जोड़कर काम करने में कामयाब रहा ।

निम्नलिखित ने मेरे लिए सफारी 13.0.4 और क्रोम 79.0.3945.130 दोनों पर काम किया:

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

उम्मीद है की यह मदद करेगा!