Highcharts: Hauteur et largeur à l'intérieur d'un conteneur flexible

Apparemment, le correctif pour #1157, ajoutant un 100% avec pour le conteneur interne et le SVG, fonctionne également pour la largeur de la boîte flexible, mais pas pour la hauteur :

• direction flexible :ligne fixe

Existe-t-il une solution de contournement pour le problème de hauteur en attendant?

J'ai réussi à mettre height: 0 sur le parent qui a quelque chose comme flex: 1 1 50% , et à m'assurer que le conteneur de graphique a 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

Et cela semble fonctionner (dans Chrome) dans tous les cas. Cela devient vraiment difficile de mélanger flex et largeur/hauteur, car ils ne sont pas vraiment censés fonctionner ensemble.

Merci beaucoup pour ta réponse!!! Ça a marché :)

Je l'ai également fait fonctionner en utilisant height:100% sur le "chart-container", qui se trouvait sous un élément fléchi.

Pour une raison quelconque, height:0 n'a pas fonctionné pour moi (mais j'ai dû utiliser width:0 dans certains cas, donc la mise en page flex n'utilise pas le contenu enfant).

Un problème avec la hauteur est apparu lors du test de l'application dans Chrome (dernière version 64.0). Le conteneur highchart ne rentre pas dans le parent. Il déborderait (pas comme le défilement mais deviendrait plus gros que le conteneur parent). La structure de html peut être représentée comme suit (.flexed_item est un enfant de div avec display défini sur flex) -

.flexed_item{ largeur : 100 % ; hauteur : 100 % ;} -> .chart-container{ largeur : 100 % ; hauteur : 80 %} -> .highchart

Cette chose fonctionnait bien dans firefox. Mais pas en chrome.
Mais comme commenté par @lwhorton , je l'ai changé en ->

.flexed_item{ hauteur : 0 ; largeur : 100 % ; flexible : 1 1 100 % ; affichage : flexible ; } -> .chart-container { flex:1; affichage:flex; } -> .highchart

Et maintenant, cela fonctionne enfin dans les deux (chrome et firefox).

Je l'ai résolu en utilisant absolutely positionné chart-container et un parent positionné relatively avec flex-grow: 1 . Et il n'y a pas de piratage impliqué, il est donc compatible avec tous les navigateurs

<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
Merci d'avoir partagé votre solution.
L'utilisation du code ci-dessus semble avoir résolu le problème, donc fermez le problème pour l'instant.
Si vous souhaitez que ce problème soit rouvert, veuillez fournir plus d'informations sur l'affaire.

Salut @maitrivasa ,
Je vois que vous avez également créé un cas séparé ici : https://github.com/highcharts/highcharts/issues/13303.

ps. s'il vous plaît ne pas dupliquer vos commentaires et sujets à cause de confusion.

Je suis désolé. j'ai supprimé mon message maintenant