Highcharts: الارتفاع والعرض داخل الحاوية المرنة

يبدو أن إصلاح # 1157 ، بإضافة 100٪ للحاوية الداخلية و SVG ، يعمل أيضًا مع عرض الصندوق المرن ، ولكن ليس الارتفاع:

• الاتجاه المرن : صف ثابت

هل هناك حل بديل لمشكلة الارتفاع في الوقت الحالي؟

لقد نجحت في وضع 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

ويبدو أن هذا يعمل (في Chrome) في جميع الحالات. يصبح الأمر صعبًا حقًا عند مزج المرن والعرض / الارتفاع ، حيث لا يُقصد بهما العمل معًا.

شكرا جزيلا لردكم!!! انها عملت :)

لقد عملت أيضًا باستخدام الارتفاع: 100٪ على "حاوية الرسم البياني" ، والتي كانت تحت عنصر مرن.

لسبب ما ، الارتفاع: 0 لم يعمل بالنسبة لي (ولكن كان علي استخدام العرض: 0 في بعض الحالات ، لذلك لا يستخدم التخطيط المرن المحتوى الفرعي).

ظهرت مشكلة في الارتفاع عند اختبار التطبيق في Chrome (الإصدار 64.0 الأحدث). لن يتم وضع حاوية المخطط العالي داخل الأصل. سوف يفيض فقط (ليس مثل التمرير ولكنه نما أكبر من الحاوية الرئيسية). يمكن تمثيل بنية html على النحو التالي (.flexed_item هو عنصر فرعي لـ div مع ضبط الشاشة على flex) -

.flexed_item {width: 100٪؛ الارتفاع: 100٪ ؛} -> حاوية الخرائط {العرض: 100٪ ؛ الارتفاع: 80٪} -> مخطط عالي

كان هذا الشيء يعمل بشكل جيد في Firefox. ولكن ليس من الكروم.
ولكن كما علق lwhorton ، قمت بتغييره إلى ->

.flexed_item {الارتفاع: 0 ؛ العرض: 100٪؛ المرن: 1 1100٪ ؛ عرض: فليكس ؛ } -> حاوية مخطط {فليكس: 1 ؛ عرض: فليكس ؛ } ->. highchart

والآن يعمل في كل من (الكروم وفايرفوكس) أخيرًا.

لقد قمت بحلها باستخدام 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>

تضمين التغريدة
شكرا لتقاسم الحل الخاص بك.
يبدو أن استخدام الكود أعلاه أدى إلى حل المشكلة ، لذا أغلق المشكلة في الوقت الحالي.
إذا كنت ترغب في إعادة فتح هذه المشكلة ، فيرجى تقديم مزيد من المعلومات حول القضية.

مرحبًا maitrivasa ،
أرى أنك أنشأت أيضًا حالة منفصلة هنا: https://github.com/highcharts/highcharts/issues/13303.

ملاحظة. يرجى عدم تكرار تعليقاتك وموضوعاتك بسبب الإرباك.

أنا آسف. لقد قمت بإزالة منشوري الآن