Highcharts: Высота и ширина внутри гибкого контейнера

По-видимому, исправление для # 1157, добавляющее 100% с для внутреннего контейнера и SVG, также работает для ширины гибкого блока, но не для высоты:

• flex- direction: ряд фиксированный

Есть ли пока способ решения проблемы с высотой?

Мне удалось поставить 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). Контейнер highchart не помещается внутри родительского элемента. Он бы просто переполнился (не как прокрутка, а стал больше, чем родительский контейнер). Структура html может быть представлена ​​следующим образом (.flexed_item является дочерним элементом div с отображением гибкости):

.flexed_item {ширина: 100%; высота: 100%;} -> .chart-container {ширина: 100%; height: 80%} -> .highchart

Эта штука отлично работала в firefox. Но не в хроме.
Но, как прокомментировал @lwhorton , я изменил его на ->

.flexed_item {высота: 0; ширина: 100%; гибкость: 1 1 100%; дисплей: гибкий; } -> .chart-container {flex: 1; дисплей: гибкий; } -> .highchart

И теперь он, наконец, работает в обоих (Chrome и Firefox).

Я решил это, используя absolutely positioned 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.

пс. пожалуйста, не дублируйте ваши комментарии и темы из-за непонятливости.

Мне жаль. Я удалил свой пост сейчас