CSS3 फ्लेक्सबॉक्स पूर्ण-ऊंचाई ऐप और ओवरफ़्लो

Question

मेरे पास एक ऐसा ऐप है जो क्लासिक ईमेल का उपयोग करता है जैसे नीचे दिए गए लेआउट।

मैं नए CSS3 के flexbox मॉडल का उपयोग कर यह निर्माण किया है और जब तक मैं उपयोगकर्ता के लिए क्षमता गतिशील फ़ोल्डरों बॉक्स में नए आइटम जोड़ने के लिए जोड़ यह शानदार ढंग से काम करता है। मुझे उम्मीद थी कि फ्लेक्सबॉक्स इस तरह से काम करता है कि जब तक फ़ोल्डर्स बॉक्स में स्पेस छोड़ा जाता है, तब तक यह नीचे दिए गए कार्य बॉक्स में बढ़ना शुरू नहीं होगा। दुर्भाग्य से यह मैं नहीं देख रहा हूं (क्रोम 17 में)।

मैंने एक JSFiddle here बनाया है जो समस्या का प्रदर्शन करता है। बस पर क्लिक करें फ़ोल्डर लिंक जोड़ें और आप फ़ोल्डर्स बॉक्स को बढ़ते हुए देखेंगे, भले ही इसमें नए बच्चे को समायोजित करने के लिए पर्याप्त जगह है।

प्रश्न के लिए। मैं फ्लेक्सबॉक्स का उपयोग करके दो लंबवत गठबंधन बक्से कैसे बना सकता हूं, जिसमें कोई भी उपलब्ध ऊंचाई (बॉक्स-फ्लेक्स 2) और दूसरा एक तिहाई (बॉक्स-फ्लेक्स 1) लेता है और वे ऐसा करते हैं इस तरह से जब पहली सामग्री में नई सामग्री को जोड़ा जाता है तो यह अंतरिक्ष से बाहर होने तक बढ़ने शुरू नहीं होता है।

Answer 1

मैं यह सुनिश्चित नहीं कर सकता कि यह ब्राउज़र बग है या यदि वास्तव में यह है कि फ्लेक्स मॉडल को कैसे काम करना है। अगर ऐसा है कि इसे कैसे काम करना चाहिए तो मैं सहमत हूं कि वास्तव में सहज नहीं है!

मुझे ओवरफ्लो सेट ऑटो के साथ एक पूरी तरह से स्थित div में सूचियों को लपेटकर चारों ओर एक काम मिला। यह फ्लेक्स बक्से को अपने मूल राज्यों को बनाए रखने की अनुमति देता है और केवल तभी बदलता है जब पूरा लेआउट पुन: गणना की जाती है।

<section id="folders"> 
    <div class="dynamicList"> 
    <h2>Folders</h2> 
    <ul> 
     <li>Folder 1</li> 
     <li>Folder 2</li> 
    </ul> 
    <a href="#" id="add">Add Folder</a> 
    </div>  
</section> 

और अद्यतन सीएसएस:

#left #tasks, 
#left #folders { 
    position: relative; 
} 

.dynamicList { 
    bottom: 0; 
    left: 0; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

मैं अपने बेला यहाँ काँटेदार डेमो के लिए: http://jsfiddle.net/MUWhy/4/

अद्यतन:

यहाँ अद्यतन मार्कअप है 0 यदि आप हेडिंग्स को स्थिर रखना चाहते हैं और केवल फ़ोल्डर और कार्यों की सूची स्क्रॉल की सामग्री है, तो मैं शीर्षक और जोड़ बटन को अपने बाएं-ऊंचाई वाले बक्से में # बाएं div में डालने पर विचार करूंगा। यह थोड़ा और निशान है लेकिन अभी भी बहुत आसान है। मैंने JSFiddle पर यह कोशिश नहीं की है, लेकिन मुझे लगता है कि जाने का सबसे अच्छा मार्ग होगा।

Answer 2

मैं जिम के लिए यह समाधान पसंद करता हूं क्योंकि यह एक हैक से कम है - यह पृष्ठ के किसी भी भाग पर किसी भी फ्लेक्सबॉक्स पर काम करेगा। जिम केवल पृष्ठ के ऊपरी बाईं ओर एक बॉक्स पर काम कर सकता है।

मैंने फ्लेक्स बॉक्स के हिस्से को लपेटकर हल किया जिसे मैं div.scrollbox के अंदर स्क्रॉल करना चाहता था। मैंने इस div के प्रत्यक्ष बच्चों को 0 की ऊंचाई बनाई है, ताकि इसमें अतिरिक्त तत्व जोड़ना शेष लेआउट को प्रभावित नहीं करेगा। मैंने अपने overflow-y को auto पर भी सेट किया है ताकि एक स्क्रॉलबार दिखाई दे, यदि उसके बच्चे अपनी सीमाओं से आगे बढ़ते हैं।

.scrollbox { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
} 
.scrollbox > * { 
    height: 0; 
} 

ध्यान दें कि यह केवल तभी काम करेगा जब विस्तारित सामग्री किसी तत्व या तत्व युक्त हो। इस उदाहरण में, li तत्व ul तत्व के भीतर निहित हैं, इसलिए यह काम करता है।

मुझे स्वयं को व्यवस्थित करने के लिए शीर्ष बाएं फ्लेक्सबॉक्स के 3 घटकों को प्राप्त करने के लिए कुछ बदलाव करना पड़ता था, लेकिन यह एप्लिकेशन विशिष्ट था।

#folders { 
    display: -webkit-flex; 
    -webkit-flex-flow: column; 
} 
#folders h2, #folders #add { 
    -webkit-flex: 0 1 auto; 
} 

मैंने उपरोक्त jsfiddle को यहां पर फोर्क किया: http://jsfiddle.net/FfZFG/।

Answer 3

मैं अपने अन्य प्रश्न से इस सवाल का जवाब जो है मिल गया है एक ही कम या ज्यादा: https://stackoverflow.com/a/14964944/1604261

@LukeGT समाधान करने के बजाय

, कि यह एक समाधान है और प्रभाव प्राप्त करने के लिए समाधान है, आप आवेदन कर सकते हैं उस तत्व की ऊंचाई जहां आप एक लंबवत स्क्रॉल देखना चाहते हैं।

तो सबसे अच्छा समाधान आप लंबवत स्क्रॉल में एक मिनट ऊंचाई चाहते हैं:

#container article { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 100px; 
} 

तुम सिर्फ मामले में पूर्ण लंबवत स्क्रॉल चाहते हैं वहाँ लेख को देखने के लिए पर्याप्त स्थान नहीं है:

#container article { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 0px; /* or height:0px */ 
} 

आप ऊंचाई निर्धारित नहीं करते हैं (ऊंचाई या मिनट ऊंचाई का उपयोग कर) लंबवत स्क्रॉल सेट नहीं किया जाएगा। सभी मामलों में, ऊंचाई के साथ भी: 0 पीएक्स; तत्व की गणना की गई ऊंचाई शून्य से अलग होगी।

-webkit उपसर्ग के साथ मेरे समाधान: http://jsfiddle.net/ch7n6/4/

संपादित:

के बाद से फ़ायरफ़ॉक्स अब पूर्ण flexbox विनिर्देश का समर्थन करता है, को दूर करने -webkit- विक्रेता उपसर्ग यह सभी ब्राउज़रों के साथ काम करेंगे।