मेरे पास स्थिति कैसे हो सकती है: निश्चित; एक flexbox आकार के तत्व के लिए व्यवहार?

Question

मेरे पास एक div है जिसे .side-el कहा जाता है जिसे मैं एक स्थिति में रखना चाहता हूं: निश्चित; व्यवहार, लेकिन जैसे ही मैं आवेदन करता हूं, वही दाईं ओर चौड़ाई वैकल्पिक तय करता है। सही चौड़ाई flexbox द्वारा एक सेट होगा। मैं इस लक्ष्य को कैसे प्राप्त कर सकता हूं?

.container { 
 
    -webkit-align-content: flex-start; 
 
    align-content: flex-start; 
 
    -webkit-align-items: flex-start; 
 
    align-items: flex-start; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-justify-content: flex-start; 
 
    justify-content: flex-start; 
 
    
 
    * { 
 
    box-sizing: border-box; 
 
    -webkit-flex-grow: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-shrink: 0; 
 
    flex-shrink: 0; 
 
    } 
 
} 
 

 

 
.main-el { 
 
    box-sizing: border-box; 
 
    padding:0 2em; 
 
    width: 70%; 
 
} 
 

 
.side-el { 
 
    box-sizing: border-box; 
 
    width: 30%; 
 
}

<div class="container" style="background-color: blue; height: 100px;"> 
 
    <div class="main-el"> 
 
    <div style="background-color: red; height: 1000px;">content</div> 
 
    </div> 
 
    <div class="side-el" > 
 
    <div style="background-color: red; height: 100px;">content</div> 
 
    </div> 
 
</div>

Answer 1

आप नहीं कर सकते।

रूप CSS2.1 spec से समझाया:

बिल्कुल तैनात बक्से सामान्य प्रवाह से बाहर ले जाया जा सकता है।

और Flexible Box Layout कल्पना पुष्टि की है कि:

एक flex containerका एक बिल्कुल-तैनात बच्चे फ्लेक्स लेआउट में भाग नहीं है। हालांकि, यह reordering step में देखें (order देखें), जिसका उनके पेंटिंग ऑर्डर में प्रभाव पड़ता है।

^{(जोर मेरा)}

Answer 2

@Daniel, मुझे पता है यह बहुत देर हो चुकी है, लेकिन है ... जबकि स्वीकार किए जाते हैं जवाब सही है, मैं इसे बहुत उपयोगी है महसूस नहीं करते। मेरे पास एक ही प्रश्न था (जिस तरह से मैं इस पोस्ट में आया था), और मुझे लगता है कि समाधान के साथ मैं फ्लेक्स तत्व के भीतर स्थिति निश्चित तत्व लपेटना है। यहाँ एक (बहुत बदसूरत) example

प्रासंगिक मार्कअप

<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl"> 
    <div class="Layout-aside-inner"> 
     <button ng-click="collapsed = !collapsed"> 
     <span ng-show="collapsed">&gt;</span> 
     <span ng-hide="collapsed">&lt;</span> 
     </button> 
     <ul class="Layout-aside-content"> 
     <li ng-repeat="i in items">{{i}}</li> 
     </ul> 
    </div> 
    </aside> 

प्रासंगिक सीएसएस

.Layout-aside { 
    order: 0; 
    min-width: 140px; 
    width: 140px; 
    background-color: rgba(0, 255, 0, .4); 
    transition: width .4s, min-width .4s; 
} 
.Layout-aside.isCollapsed { 
    min-width: 25px; 
    width: 25px; 
} 

.Layout-aside-inner { 
    position: fixed; 
} 

.Layout-aside.isCollapsed .Layout-aside-inner { 
    width: 25px; 
} 

.Layout-aside.isCollapsed .Layout-aside-content { 
    opacity: 0; 
} 

Answer 3

एक बहुत आसान समाधान main-el कंटेनर पर overflow-y:scroll और height: 100vh उपयोग करने के लिए किया जाएगा है। यह side-el कंटेनर को स्थिति का उपयोग किए बिना निश्चित स्थिति की उपस्थिति देगा: निश्चित।

.fixed-top { 
    display: flex; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

यह साँस लेने के लिए अपने फ्लेक्स बॉक्स कक्ष देता है और यह फ्लेक्स बॉक्स बात है कार्य करें:

Answer 4

यहाँ इस बूटस्ट्रैप से प्रेरित करने के लिए एक तरीका है। यदि आपकी फ्लेक्स-दिशा कॉलम है, तो आप इसके बजाय top, left, bottom का उपयोग कर सकते हैं।

यह काम करता है, क्योंकि जब आप एक तत्व एक निश्चित स्थिति और एक left और right 0 से या एक top और bottom 0 से देते हैं, तत्व सही, या ऊपर से नीचे बाएं से जगह को भरने के खींची जाती है। इसके बदले में एक फ्लेक्स-बॉक्स को उस स्थान की मात्रा का उपयोग करने की अनुमति मिलती है जिसे आप निश्चित स्थिति के बिना उम्मीद करेंगे।