Highcharts: フレックスコンテナ内の高さと幅

どうやら＃1157の修正で、内部コンテナとSVGに100％を追加すると、フレックスボックスの幅でも機能しますが、高さでは機能しません。

• フレックス方向：行固定

それまでの間、高さの問題の回避策はありますか？

flex: 1 1 50%ようなものを持つ親にheight: 0を配置し、チャートコンテナに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で）機能するようです。 フレックスと幅/高さを組み合わせると、実際には一緒に機能することを意図していないため、非常に注意が必要です。

ご回答ありがとうございます!!! 出来た ：）

また、屈曲したアイテムの下にある「チャートコンテナ」でheight：100％を使用して動作させました。

何らかの理由で、 height：0は機能しませんでした（ただし、場合によってはwidth：0を使用する必要があったため、flexレイアウトでは子コンテンツが使用されません）。

Chrome（最新の64.0）でアプリをテストしたときに、高さの問題が発生しました。 ハイチャートコンテナは親の中に収まりません。 オーバーフローするだけです（スクロールとは異なりますが、親コンテナよりも大きくなります）。 htmlの構造は次のように表すことができます（.flexed_itemはdivの子であり、displayはflexに設定されています）-

.flexed_item {幅：100％; 高さ：100％;}-> .chart-container {width：100％; 高さ：80％}-> .highchart

このことはFirefoxでうまく機能していました。 しかし、クロムではありません。
しかし、 @ lwhortonがコメントした

.flexed_item {高さ：0; 幅：100％; フレックス：1 1 100％; 表示：フレックス; }-> .chart-container {flex：1; display：flex; }-> .highchart

そして今、それはついに両方（chromeとfirefox）で動作しています。

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>

@dabalyan
ソリューションを共有していただきありがとうございます。
上記のコードを使用すると問題が解決したようですので、とりあえず問題を閉じてください。
この問題の再開をご希望の場合は、ケースに関する詳細情報をお知らせください。

こんにちは@maitrivasa 、
https://github.com/highcharts/highcharts/issues/13303で別のケースも作成したようです

ps。 混乱を招くため、コメントや件名を複製しないでください。

ごめんなさい。 投稿を削除しました