मैं फ्लेक्सबॉक्स बच्चों को उनके माता-पिता की 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>

और यहाँ JSFiddle है

flex-2-child दो मामलों को छोड़कर, जहां आवश्यक ऊंचाई नहीं भरी जाती है:

1. flex-2 100% की ऊंचाई है (जो अजीब है क्योंकि एक फ्लेक्स आइटम में डिफ़ॉल्ट रूप से 100% है + यह क्रोम में छोटी गाड़ी है)
2. flex-2-child एक स्थिति निरपेक्ष है जो असुविधाजनक भी है

वर्तमान में यह क्रोम या फ़ायरफ़ॉक्स में काम नहीं करता है।

Comments

ऊंचाई का उपयोग करने में क्या समस्या है: 100%; .flex-2 के लिए?

— rmagnum2002

यह फ्लेक्स आइटम के उद्देश्य को धता बताता है जो सामग्री को अपने आप से भरना है और यह मुझे क्रोम में सबसे अजीब बग दे रहा है जहां खिड़की को आकार देने पर ऊंचाई शून्य हो जाती है

— Raz

दरअसल, फ़ायरफ़ॉक्स का नवीनतम संस्करण ठीक से काम करने वाला एकमात्र है

— Raz

वर्तमान में, फ्लेक्सबॉक्स में प्रतिशत ऊंचाइयों को प्रदान करने के लिए ब्राउज़रों के बीच व्यवहार में महत्वपूर्ण अंतर हैं: 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: यह चुना हुआ उत्तर होना चाहिए।

— डेव एवरिट

निश्चित रूप से यह सवाल का सबसे अच्छा जवाब है। अच्छी तरह से काम।

— मार्च

हां, यह वास्तव में इस सवाल का सबसे अच्छा जवाब है।

— 19yvind Bråthen

height: 100%बच्चों के उस घटक से भी दूर करना न भूलें जो आप माता

— इल्हाम वहाबी जीएक्स

कृपया height: 100%उत्तर में हटा दें - मैंने लगभग छोड़ दिया और केवल अंतिम क्षण में इसे देखा absolute- जो कि सभी प्रकार की समस्याओं के साथ आता है।

— पीटर

Answer 2

मैंने यहां एक ऐसे ही सवाल का जवाब दिया है ।

मुझे पता है कि आप पहले ही कह चुके हैं कि position: absolute;यह असुविधाजनक है लेकिन यह काम करता है। आकार बदलने के मुद्दे को ठीक करने के बारे में अधिक जानकारी के लिए नीचे देखें।

यह भी देखें jsFiddle को डेमो के लिए , हालाँकि मैंने केवल Chrome में वेबकिट उपसर्ग जोड़े हैं।

आपके पास मूल रूप से 2 मुद्दे हैं जिनसे मैं अलग से निपटूंगा।

1. 100% ऊँचाई भरने के लिए एक फ्लेक्स आइटम का बच्चा प्राप्त करना
   • position: relative;बच्चे के माता-पिता पर सेट करें ।
   • position: absolute;बच्चे पर सेट करें ।
   • फिर आप आवश्यकता के अनुसार चौड़ाई / ऊंचाई निर्धारित कर सकते हैं (मेरे नमूने में 100%)।
2. क्रोम में "स्क्रॉल" क्विक का आकार बदलना
   • overflow-y: auto;स्क्रॉल करने योग्य div पर रखें ।
   • स्क्रॉल करने योग्य div में एक स्पष्ट ऊंचाई निर्दिष्ट होनी चाहिए। मेरे नमूने की ऊंचाई पहले से ही 100% है, लेकिन यदि कोई पहले से लागू नहीं है तो आप निर्दिष्ट कर सकते हैंheight: 0;

स्क्रॉलिंग मुद्दे पर अधिक जानकारी के लिए यह उत्तर देखें ।

Comments

बिंदु 1) क्रोम में पूरी तरह से काम करता है, फ़ायरफ़ॉक्स को निरपेक्ष स्थिति की आवश्यकता नहीं है।

— यूरी

Answer 3

अगर मैं सही तरीके से समझूं, तो आप चाहते हैं कि फ्लेक्स -2 बच्चा अपने माता-पिता की ऊंचाई और चौड़ाई को भरे, ताकि लाल क्षेत्र पूरी तरह से हरे रंग से ढंका हो?

यदि हां, तो आपको फ्लेक्सबॉक्स का उपयोग करने के लिए केवल फ्लेक्स -2 सेट करने की आवश्यकता है:

.flex-2 {
    display: flex;  
}

फिर फ्लेक्स -2 बच्चे को लचीला बनने के लिए कहें:

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

Http://jsfiddle.net/2ZDuE/10/ देखें

कारण यह है कि फ्लेक्स -2-चाइल्ड एक फ्लेक्सबॉक्स आइटम नहीं है, बल्कि इसका मूल है।

Comments

मैं केवल 100% की ऊंचाई के साथ और 50/50 बच्चों के साथ ऐसा कैसे कर सकता हूं?

— रिकी लेवी

ध्यान रखें कि यदि आप "संरेखित-आइटम: केंद्र" का उपयोग करते हैं, तो आप इस सुधार का उपयोग नहीं कर पाएंगे क्योंकि आपकी वस्तुएँ अब समान ऊँचाई की हो जाएंगी।

— नील मुनरो

@NeilMonroe आप अभी भी उपयोग कर सकते हैं align-items: centerयदि आप align-self: stretchसिर्फ एक बच्चे पर उपयोग करते हैं।

— बीटी

हाय @ डेविड, मैंने आपके समाधान की कोशिश की, यह फ्लेक्स-दिशा के लिए ठीक काम करता है: पंक्ति लेआउट, यह फ्लेक्स-दिशा के साथ काम नहीं करता है: कॉलम लेआउट, या मेरे पास कोड में कोई भी स्थान गलत है। क्या आप यह जांचने में मदद कर सकते हैं कि इस फिडेल jsfiddle.net/78o54Lmv में , इनर बॉक्स अपने माता-पिता की पूरी ऊंचाई पर कब्जा क्यों नहीं करेगा?

— हुआन फेंग

मुझे इसे काम करने के min-height: 100vh;लिए .flex-2तत्व में जोड़ना होगा। सहायता के लिए धन्यवाद!

— तेनुस्सदेह

Answer 4

मुझे लगता है कि Chrome का व्यवहार CSS युक्ति के साथ अधिक सुसंगत है (हालाँकि यह कम सहज है)। फ्लेक्सबॉक्स कल्पना के अनुसार, संपत्ति का डिफ़ॉल्ट stretchमूल्य केवल तत्व के "क्रॉस साइज संपत्ति" ( इस मामले में) के उपयोग किए गए मूल्य को बदलता है । और, जैसा कि मैं CSS2.1 कल्पना को समझता हूं , प्रतिशत ऊंचाइयों की गणना माता-पिता के निर्दिष्ट मूल्य से की जाती है , न कि इसका उपयोग किया गया मूल्य। माता-पिता का निर्दिष्ट मूल्य किसी भी फ्लेक्स गुणों से प्रभावित नहीं है और अभी भी है ।align-selfheightheightheightauto

स्पष्ट स्थापना height: 100%बनाता है यह औपचारिक रूप से संभव बस की स्थापना की तरह बच्चे का प्रतिशत ऊंचाई की गणना करने के height: 100%लिए htmlयह संभव का प्रतिशत ऊंचाई की गणना करने के बनाता है bodyCSS2.1 में।

Comments

बिल्कुल सही! व्यवहार में इस डाल, बस जोड़ने height:100%के लिए .flex-2। यहाँ jsfiddle है ।

— कोर्टडेमोन

Chrome टीम का व्यवहार Chrome टीम की सीएसएस कल्पना की व्याख्या के साथ अधिक सुसंगत है । हालांकि यह इस तरह से व्याख्या की जा सकती है, लेकिन इसकी व्याख्या करने के बेहतर तरीके हैं, जिनमें से कोई भी हमें इस बाजार में नहीं फँसाएगा, कष्टप्रद और अपमानजनक व्यवहार। उन्हें इसे और अधिक के माध्यम से सोचना चाहिए था।

— व्रिथकेनी

@ रिकड्सबर्ग, यह एक साल से अधिक समय पहले था, लेकिन मेरा मानना ​​है कि मुझे निश्चित ऊंचाई वाले तत्वों का सहारा लेना पड़ा। काश ये ब्राउजर्स अपनी एक्टिंग एक साथ कर पाते। मैं वास्तव में मोबाइल स्पेस को नापसंद करने लगा हूं।

— जॉर्डन

क्रोम में एक ऊर्ध्वाधर फ्लेक्सबॉक्स कंटेनर के एक बच्चे को सेट करना 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;साथ div flex-direction: row;को भरना है और , लेकिन इसका मतलब यह नहीं है कि डिफ़ॉल्ट है भले ही इसे पूरी ऊंचाई तक बढ़ा दिया गया हो और एक बच्चा तत्व हो ( ) के साथ आपको माता-पिता को सेट करने या उपयोग करने की आवश्यकता होगी साथ पर div भी।container.flex-1.flex-2.flex-2height:100%;.flex-2-childheight:100%;height:100%;display:flex;flex-direction: row;.flex-2

जो मुझे पता है 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>

सीएसएस

.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 में आपका स्वागत है। आपको अपने उत्तर को पूरी तरह से समझाने की आवश्यकता है, और यह जो योगदान देता है वह मौजूदा उत्तरों से अलग है। देखें stackoverflow.com/help/how-to-answer

— सिमोन। एसए

आपका उत्तर बीटी (तीन साल से अधिक पहले लिखा हुआ) के समान ही प्रतीत होता है, लेकिन अधिक खराब तरीके से व्यक्त किया गया है।

— क्वेंटिन

Answer 10

यह css + का उपयोग करके मेरा समाधान है

सबसे पहले अगर पहला बच्चा (फ्लेक्स -1) 100px होना चाहिए तो फ्लेक्स नहीं होना चाहिए। में सीएसएस + वास्तव में आप लचीला और / या स्थिर तत्वों (स्तंभों या पंक्तियों) और अपने उदाहरण इस जितना आसान हो गया है निर्धारित कर सकते हैं:

<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;
}

और स्पष्ट रूप से सीएसएस + 0.2 कोर शामिल हैं

फील सुनें