Highcharts: 弹性容器内的高度和宽度

显然，#1157 的修复，为内部容器和 SVG 添加 100% with，也适用于弹性框宽度，但不适用于高度：

• flex-方向：行固定

在此期间是否有解决高度问题的方法？

我已经成功地将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 中）。 混合 flex 和宽度/高度时会变得非常棘手，因为它们并不是真的要一起工作。

非常感谢您的回复！！！ 有效 ：）

我还通过在“图表容器”上使用height:100%来让它工作，它位于一个弯曲的项目下。

出于某种原因， height:0对我不起作用（但在某些情况下我不得不使用 width:0 所以 flex 布局不使用子内容）。

在 Chrome（最新 64.0）中测试应用程序时遇到了高度问题。 highchart 容器不适合父容器。 它只会溢出（不像滚动，而是比父容器变大）。 html的结构可以表示如下（.flexed_item是div的子元素，显示设置为flex）——

.flexed_item{ 宽度：100%； 高度：100%;} -> .chart-container{ 宽度：100%; 高度：80%} -> .highchart

这东西在 Firefox 中运行良好。 但不是铬。
但正如@lwhorton所评论的，我将其更改为 ->

.flexed_item{ 高度：0; 宽度：100%； 弹性：1 1 100%； 显示：弹性； }-> .chart-container { flex:1; 显示：弹性； } -> .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 :

附： 请不要因为混淆而重复您的评论和主题。

对不起。 我现在已经删除了我的帖子