Highcharts: एक फ्लेक्स कंटेनर के अंदर ऊंचाई और चौड़ाई

स्पष्ट रूप से # 1157 के लिए फिक्स, आंतरिक कंटेनर और एसवीजी के साथ 100% जोड़कर, फ्लेक्स बॉक्स चौड़ाई के लिए भी काम करता है, लेकिन ऊंचाई नहीं:

• फ्लेक्स- दिशा: पंक्ति निश्चित

क्या इस बीच ऊंचाई के मुद्दे के लिए कोई समाधान है?

मैं सफलता डाल लिया है height: 0 माता-पिता की तरह कुछ है पर flex: 1 1 50% , और यकीन चार्ट-कंटेनर है बनाने overflow: hidden ।

<div id="parent"> // flex-sized, but height 0
  <div id="chart-container"> // flex 1, overflow hidden, display flex
    <div id="chart"> // flex 1, overflow hidden

और यह सभी मामलों में (क्रोम में) काम करता प्रतीत होता है। फ्लेक्स और चौड़ाई/ऊंचाई को मिलाते समय यह वास्तव में मुश्किल हो जाता है, क्योंकि वे वास्तव में एक साथ काम करने के लिए नहीं हैं।

आपके उत्तर के लिए बहुत बहुत धन्यवाद!!! वो कर गया काम :)

मैंने इसे "चार्ट-कंटेनर" पर ऊंचाई: 100% का उपयोग करके भी काम किया था, जो एक लचीली वस्तु के नीचे था।

किसी कारण से ऊंचाई: 0 ने मेरे लिए काम नहीं किया (लेकिन मुझे कुछ मामलों के लिए चौड़ाई: 0 का उपयोग करना पड़ा, इसलिए फ्लेक्स लेआउट बाल सामग्री का उपयोग नहीं करता है)।

क्रोम (नवीनतम 64.0) में परीक्षण किए गए ऐप के दौरान ऊंचाई के साथ समस्या सामने आई। हाईचार्ट कंटेनर पैरेंट के अंदर फिट नहीं होगा। यह सिर्फ ओवरफ्लो होगा (स्क्रॉलिंग की तरह नहीं बल्कि पैरेंट कंटेनर से बड़ा हो गया)। एचटीएमएल की संरचना को निम्नानुसार दर्शाया जा सकता है (.flexed_item डिव का एक बच्चा है जिसमें डिस्प्ले फ्लेक्स पर सेट है) -

.flexed_item {चौड़ाई: १००%; ऊंचाई: १००%;} -> .चार्ट-कंटेनर {चौड़ाई: १००%; ऊंचाई:८०%} -> .highchart

यह बात फ़ायरफ़ॉक्स में ठीक काम कर रही थी। लेकिन क्रोम में नहीं।
लेकिन जैसा कि @lwhorton ने टिप्पणी की, मैंने इसे -> . में बदल दिया

.flexed_item{ऊंचाई: 0; चौड़ाई: 100%; फ्लेक्स: १ १ १००%; प्रदर्शन: फ्लेक्स; }-> .चार्ट-कंटेनर {फ्लेक्स:1; प्रदर्शन: फ्लेक्स; } -> .हाईचार्ट

और अब यह अंत में (क्रोम और फ़ायरफ़ॉक्स) दोनों में काम कर रहा है।

मैंने इसे absolutely स्थित chart-container और relatively साथ flex-grow: 1 तैनात माता-पिता का उपयोग करके हल किया। और इसमें कोई हैक शामिल नहीं है इसलिए यह क्रॉस-ब्राउज़र संगत है

<div id="row" style="display:flex">
    <div id="col" style="display:flex; flex-direction: column;">
        <div id="chart-container-outer" style="position:relative; flex-grow:1">
            <div id="chart-container" style="position:absolute; left:0; top: 0; bottom:0; right:0; overflow:hidden"></div>
        </div>
    </div>

    <div id="col sibling" style="display:flex"> // same height
    </div>
</div>

@dabalyan
अपना समाधान साझा करने के लिए धन्यवाद।
ऐसा लगता है कि उपरोक्त कोड का उपयोग करने से समस्या हल हो गई है, इसलिए इस मुद्दे को अभी के लिए बंद कर दें।
यदि आप इस मुद्दे को फिर से देखना चाहते हैं तो कृपया मामले के बारे में अधिक जानकारी प्रदान करें।

नमस्ते @maitrivasa ,
मैं देख रहा हूं कि आपने यहां एक अलग मामला भी बनाया है: https://github.com/highcharts/highcharts/issues/13303।

पुनश्च कृपया भ्रमित करने के कारण अपनी टिप्पणियों और विषयों की नकल न करें।

मैं माफी चाहता हूं। मैंने अब अपनी पोस्ट हटा दी है