फ्लेक्सबॉक्स: सामग्री ओवरफ्लो पर दो अन्य flexchildren के बीच flexchild स्क्रॉलिंग - सीएसएस, सीएसएस 3, flexbox

मेरे पास एक मोडल डायलॉग है, जो ओवरले पर केंद्रित है।

संवाद तीन फ्लेक्स बच्चों के साथ एक फ्लेक्स कंटेनर है और इसकी अधिकतम ऊंचाई 9 0% है।

यदि दस्तावेज़ की ऊंचाई छोटी है तो मोडल की आवश्यक ऊंचाई मैं स्क्रॉलिंग सक्षम करने के लिए दूसरा बच्चा (मोडल-बॉडी) चाहता हूं।

<div class="modal">
<div class="modal-header"><h2>Modal Header</h2></div>
<div class="modal-body">  <!--this should scroll if modal-height > 90% -->
<!-- content -->
</div>
<div class="modal-controls"><!-- controls --></div>
</div>

शुद्ध सीएसएस के साथ यह संभव है अगर मेरे पास कोई सुराग नहीं है।

.modal {
position: relative;
width: 10em;
max-width: 90%;
max-height: 90%;
background-color: green;
display: flex;
flex-flow: row wrap;
}
.modal-header { flex: 1 auto; }
.modal-body {
flex: 1 auto;
overflow-y: scroll;
}
.modal-controls { flex: 1 auto; }

यहां है बेला मेरे दृष्टिकोण का।

यदि आप आउटपुट विंडो का आकार बदलते हैं तो आप देख सकते हैं कि ओवरफ़्लो स्क्रॉल करने के बजाय मोडल डायलॉग नीचे कट जाता है।

अग्रिम में धन्यवाद।

उत्तर:

जवाब के लिए 0 № 1

यह बहुत आसान है। आपको बस इतना बदलना है

.modal {
...
flex-flow: row wrap;
}

साथ में

.modal {
...
flex-direction: column;
}

और यह काम करता है। आवश्यक नहीं है, लेकिन आपको विस्तार करने के लिए मोडल-हेडर और मोडल-कंट्रोल को भी रोकना चाहिए:

.modal-header, .modal-controls {
flex: 0 0 auto;
}
.modal {
...
flex: 1 1 auto;
}

यहां है कामकाजी उदाहरण


संबंधित सवाल
सबसे लोकप्रिय