Highcharts: Altura e largura dentro de um contêiner flexível

Aparentemente, a correção para # 1157, adicionando um 100% com para o recipiente interno e o SVG, também funciona para a largura da caixa flexível, mas não a altura:

• direção flexível : linha fixa

Existe uma solução alternativa para o problema de altura nesse meio tempo?

Tive sucesso colocando height: 0 no pai que tem algo como flex: 1 1 50% e certificando-se de que o contêiner do gráfico tem 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

E isso parece funcionar (no Chrome) em todos os casos. Fica muito complicado misturar flex e largura / altura, já que eles não foram feitos para funcionar juntos.

Muito obrigado pela sua resposta!!! Funcionou :)

Também fiz funcionar usando height: 100% no "chart-container", que estava embaixo de um item flexionado.

Por alguma razão, height: 0 não funcionou para mim (mas eu tive que usar width: 0 em alguns casos, então o layout flexível não usa o conteúdo filho).

O problema com a altura foi detectado durante o teste do aplicativo no Chrome (mais recente 64.0). O contêiner highchart não caberá dentro do pai. Ele simplesmente transbordaria (não como rolagem, mas ficaria maior que o contêiner pai). A estrutura do html pode ser representada da seguinte maneira (.flexed_item é filho de div com display definido como flex) -

.flexed_item {largura: 100%; altura: 100%;} -> .chart-container {largura: 100%; altura: 80%} -> .highchart

Essa coisa estava funcionando bem no firefox. Mas não em cromo.
Mas como comentado por @lwhorton , mudei para ->

.flexed_item {height: 0; largura: 100%; flex: 1 1 100%; display: flex; } -> .chart-container {flex: 1; display: flex; } -> .highchart

E agora está funcionando em ambos (cromo e firefox) finalmente.

Eu resolvi isso usando absolutely posicionado chart-container e um pai relatively posicionado com flex-grow: 1 . E não há nenhum hack envolvido, então é compatível com vários navegadores

<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
Obrigado por compartilhar sua solução.
Usar o código acima parece ter resolvido o problema, portanto, feche-o por enquanto.
Se você deseja que este problema seja reaberto, forneça mais informações sobre o caso.

Olá @maitrivasa ,
Vejo que você também criou um caso separado aqui: https://github.com/highcharts/highcharts/issues/13303.

ps. por favor, não duplique seus comentários e assuntos por causa de confusão.

Sinto muito. Eu removi minha postagem agora