Highcharts: Alto y ancho dentro de un contenedor flexible

Aparentemente, la solución para # 1157, agregando un 100% para el contenedor interno y el SVG, también funciona para el ancho de la caja flexible, pero no para la altura:

• dirección de flexión : fila fija

¿Hay alguna solución para el problema de la altura mientras tanto?

Tuve éxito colocando height: 0 en el padre que tiene algo como flex: 1 1 50% , y asegurándome de que el contenedor del gráfico tenga 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

Y esto parece funcionar (en Chrome) en todos los casos. Se vuelve realmente complicado mezclar flex y ancho / alto, ya que en realidad no están destinados a funcionar juntos.

¡¡¡Muchas gracias por su respuesta!!! Funcionó :)

También lo hice funcionar usando height: 100% en el "contenedor de gráficos", que estaba debajo de un elemento flexionado.

Por alguna razón, height: 0 no funcionó para mí (pero tuve que usar width: 0 en algunos casos, por lo que el diseño flexible no usa el contenido secundario).

El problema con la altura apareció cuando se probó la aplicación en Chrome (última versión 64.0). El contenedor highchart no cabe dentro del padre. Simplemente se desbordaría (no como el desplazamiento, pero crecería más que el contenedor principal). La estructura de html se puede representar de la siguiente manera (.flexed_item es un elemento secundario de div con la pantalla configurada en flex):

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

Esta cosa funcionaba bien en Firefox. Pero no en cromo.
Pero como lo comentó @lwhorton , lo cambié a ->

.flexed_item {altura: 0; ancho: 100%; flexión: 1 1 100%; pantalla: flex; } -> .chart-container {flex: 1; pantalla: flex; } -> .highchart

Y ahora está funcionando en ambos (Chrome y Firefox) finalmente.

Lo resolví usando absolutely posicionado chart-container y un padre posicionado relatively con flex-grow: 1 . Y no hay ningún truco involucrado, por lo que es compatible con todos los 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
Gracias por compartir tu solución.
El uso del código anterior parece resolver el problema, por lo que se cierra el problema por ahora.
Si desea que se vuelva a abrir este problema, proporcione más información sobre el caso.

Hola @maitrivasa ,
Veo que también creó un caso separado aquí: https://github.com/highcharts/highcharts/issues/13303.

PD. por favor no duplique sus comentarios y temas debido a confusión.

Lo siento. He eliminado mi publicación ahora