मेरी स्थिति: चिपचिपा तत्व चिपचिपा जब flexbox

Question

मैं थोड़ा के लिए इस पर फंस गया था का उपयोग कर और सोचा था कि मैं इस position: sticky + फ्लेक्स बॉक्स पकड़ लिया साझा करते हैं नहीं है:

मेरे चिपचिपा div ठीक काम कर रहा था जब तक मैं बंद एक फ्लेक्स बॉक्स कंटेनर के लिए मेरा विचार, और अचानक एक फ्लेक्स बॉक्स अभिभावक में लपेटा गया था जब div चिपचिपा नहीं था।

.flexbox-wrapper { 
 
    display: flex; 
 
    height: 600px; 
 
} 
 
.regular { 
 
    background-color: blue; 
 
} 
 
.sticky { 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0; 
 
    background-color: red; 
 
}

<div class="flexbox-wrapper"> 
 
    <div class="regular"> 
 
    This is the regular box 
 
    </div> 
 
    <div class="sticky"> 
 
    This is the sticky box 
 
    </div> 
 
</div>

JSFiddle showing the problem

Answer 1

stretch को फ्लेक्स बॉक्स तत्वों डिफ़ॉल्ट के बाद से, सभी तत्वों को एक ही ऊंचाई है, जो के खिलाफ स्क्रॉल नहीं किया जा सकता है।

चिपचिपा तत्व में align-self: flex-start जोड़ना ऊंचाई को ऑटो सेट करता है, जिसने स्क्रॉलिंग की अनुमति दी है, और इसे ठीक किया है। sticky` या सिर्फ एक /:

वर्तमान में यह केवल सफारी में supported और एज

.flexbox-wrapper { 
 
    display: flex; 
 
    height: 200px; 
 
    overflow: auto; 
 
} 
 
.regular { 
 
    background-color: blue; 
 
    height: 600px; 
 
} 
 
.sticky { 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0; 
 
    align-self: flex-start; 
 
    background-color: red; 
 
}

<div class="flexbox-wrapper"> 
 
    <div class="regular"> 
 
    This is the regular box 
 
    </div> 
 
    <div class="sticky"> 
 
    This is the sticky box 
 
    </div> 
 
</div>

JSFiddle showing the solution