क्या उचित है-सामग्री के साथ क्रोम में कोई बग है: स्पेस-बीच और न्यूनतम ऊंचाई?

Question

यहाँ कोड मैं पर काम कर रहा है:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    min-height: 150px; 
 
    background-color: #cbcbcb; 
 
}

<div class="container"> 
 
    <div>should be on the TOP</div> 
 
    <div>should be on the BOTTOM</div> 
 
</div>

और मैं Firefox में उम्मीद के मुताबिक परिणाम हो रही है:

लेकिन क्रोम में मैं अगले परिणाम हो रही है:

मुझे इस जगह को नीचे तत्व के तहत क्यों मिल रहा है?

इसे सीएसएस min-height से height बदलकर तय किया जा सकता है, लेकिन मेरे संदर्भ में min-height मान होना महत्वपूर्ण है।

Try it in jsFiddle

पी.एस. यह व्यवहार केवल क्रोम और कैनरी में पुन: उत्पन्न होता है, और केवल विंडोज़ पर लगता है।

मेरे env: क्रोम संस्करण 56.0.2924.87 (64-बिट) और विन 10

Answer 1

यह निश्चित रूप से एक बग की तरह दिखता है।

किसी भी मामले में, आप एक auto मार्जिन के साथ यह आस-पास काम कर सकते हैं:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 150px; 
 
    background-color: #cbcbcb; 
 
} 
 
.container > div:last-child { 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <div>should be on the TOP</div> 
 
    <div>should be on the BOTTOM</div> 
 
</div>

फ्लेक्स auto मार्जिन कल्पना का हिस्सा हैं और फ्लेक्स आइटम संरेखित करने के लिए इस्तेमाल किया जा सकता।

पूर्ण यहाँ स्पष्टीकरण: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

हाँ, क्रोम में एक बग की तरह लग रहे हैं। फ्लेक्स बच्चों के लिए

1. उपयोग flex-direction: row:

   यहाँ एक ही परिणाम प्राप्त करने के लिए एक वैकल्पिक तरीका है।

2. flex-wrap: wrap सक्षम करके फ्लेक्स बच्चों को लपेटने की अनुमति दें और उन्हें पूर्ण चौड़ाई बनाने के लिए flex-basis: 100% सेट करें।
3. अंतिम बच्चे के संरेखण को flex-end पर सेट करें।

.container { 
 
    display: flex; 
 
    flex-wrap: wrap;  
 
    min-height: 150px; 
 
    background-color: #cbcbcb;  
 
} 
 
.container div { 
 
    flex-basis: 100%; 
 
} 
 
.container div:last-child { 
 
    align-self: flex-end; 
 
}

<div class="container"> 
 
    <div> should be on the TOP</div> 
 
    <div> should be on the BOTTOM</div> 
 
</div>

Answer 3

मुझे याद है कि मैं इसी तरह की समस्या पतंगों की एक जोड़ी पहले किया था। ऐसा इसलिए है क्योंकि ऊंचाई ऑटो पर सेट है, ऊंचाई संपत्ति के लिए एक और मूल्य निर्धारित करने का प्रयास करें और समस्या हल हो जाएगी।

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    height:0; 
 
    min-height: 150px; 
 
    background-color: #cbcbcb; 
 
}

<div class="container"> 
 
    <div> should be on the TOP</div> 
 
    <div> should be on the BOTTOM</div> 
 
</div>