मेरे पास एक सीएसएस समस्या है जो मुझे नहीं पता कि कैसे हल करें। इस प्रकार की स्थिति है। मेरे पास <div>
है जो एक फ्लेक्स-आइटम है, और जो लंबवत रूप से फैला हुआ है ताकि यह अपने फ्लेक्स-कंटेनर की उपलब्ध ऊंचाई को भर सके। ब्राउज़र विंडो के आकार के आधार पर यह <div>
एक आयताकार है, कभी-कभी चौड़ा से लंबा, कभी-कभी लंबा से बड़ा होता है।फ्लेक्सबॉक्स में वर्ग के रूप में Div
अब मैं इस आयत के अंदर एक और <div>
स्थिति रखना चाहता हूं, जो वर्ग होगा। यह आसपास के आयताकार के संबंध में जितना संभव हो उतना बड़ा होना चाहिए, लेकिन यह हमेशा पूरी तरह से दिखाई देना चाहिए।
वर्ग बनाने के लिए सामान्य दृष्टिकोण padding-bottom
को एक प्रतिशत मान (जो चौड़ाई के लिए समान प्रतिशत मान है) सेट करना है। यह वास्तव में एक वर्ग बनाता है, लेकिन चूंकि इस दृष्टिकोण में ऊंचाई हमेशा चौड़ाई का पालन करती है, यदि यह लंबा से बड़ा है तो यह आयताकार को फैलाता है।
मैं इस समस्या को कैसे हल कर सकता हूं, ताकि स्क्वायर हमेशा आयताकार के आकार की सीमाओं के भीतर निहित हो जिसे फ्लेक्सबॉक्स द्वारा गणना की गई थी, आदर्श रूप से जावास्क्रिप्ट का उपयोग किए बिना?
अद्यतन: इस बीच, मैंने इसे जावास्क्रिप्ट का उपयोग करके हल किया, लेकिन अगर कोई है तो मुझे शुद्ध सीएसएस समाधान में दिलचस्पी होगी।
आपके पास कार्यशील नमूना – brk
साझा कर सकते हैं यह एक अच्छा सवाल है, मुझे यकीन है कि नहीं कर रहा हूँ अगर वहाँ एक शुद्ध सीएसएस समाधान लेकिन एक मजेदार एक प्रयास करने के लिए .. अगर केवल मैं अधिक समय था (हालांकि मुझे लगता है कि यह व्यर्थ हो सकता है!) –
मैं इसके साथ पहेली करना चाहता हूं, क्या आप शुद्ध HTML का नकली मसौदा तैयार कर सकते हैं? – Roberrrt