Javascript 使用Flexbox时，顶点图表无法正确调整大小

最近，我将float改为FlexBox，以便更轻松地处理面板（正如我在其他问题上所建议的那样）。虽然大多数事情都按照我的预期进行，但在更改后，我对Apex图表有一个问题

完整代码如下：

下面是加载时的外观。您会注意到，在第一行和第二行图表中，即使它们所在的面板已就位，也会超出边界，并且它适用于最上面一行

如果我调整大小（比如1毫米），它将开始正常工作

知道有什么问题吗

在apex charts CSS中，它有注释不使用溢出（我尝试过，但它没有做任何事情），但老实说，我甚至有一次忘记附加CSS，没有任何更改（就像所有事情都是由JS完成的一样）

        .apexcharts-canvas {
            position: relative;
            user-select: none;
            /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
        }

        /* scrollbar is not visible by default for the legend, hence forcing the visibility */

---

请记住，在JS/CSS/HTML方面，我是一个彻头彻尾的傻瓜，所以请原谅我的语言。

您需要将所有脚本移到末尾，而不是注入HTML，以允许SVG文档解析器正确获取元素的大小

工作

---

您需要提供一个，因为我们无法通过您的所有代码进行调试和图像解析。github上附有完整的HTML（检查）不够好，一个可复制的样本应该在问题中。这是负责上面图像的HTML。可复制。你不需要任何其他东西来运行它。它是一个包含所有内容的静态1 HTML文件。你只需在你的机器上将该粘贴复制到.HTML中就可以了。你没有理解我的意思。这不是如何发布问题。如果有什么不清楚的地方，请重读哇！谢谢。没想到：-）我会用我现在拥有的东西来工作，当它被修复时，它会自行修复。谢谢你。我实际上是在写一封回复信，这似乎是一个类似的问题，最近被修补了。有没有可能补丁没有按预期工作？@OliverDunk是的，很可能补丁没有工作。也许我错过了一些测试。@junedchipa没什么不快，谢谢你的快速回复：）缩放/平移工具目前只适用于日期时间序列。因此，您不会在类别x轴图表中看到它们。

var options = {
  "chart": {
    "height": 350,
    "type": "line",
    "toolbar": {
      "show": true,
      "tools": {
        "download": true,
        "selection": true,
        "zoom": true,
        "zoomin": true,
        "zoomout": true,
        "pan": true,
        "reset": true
      },
      "autoSelected": "zoom"
    }
  },
  "plotOptions": {
    "bar": {
      "horizontal": true
    }
  },
  "dataLabels": {
    "enabled": true,
    "offsetX": -6,
    "style": {
      "fontSize": "12px",
      "colors": [
        null
      ]
    }
  },
  "series": [{
      "name": "People count",
      "data": [
        400,
        430,
        448
      ]
    },
    {
      "name": "People death",
      "data": [
        450,
        0,
        200
      ]
    }
  ],
  "xaxis": {
    "type": "category",
    "categories": [
      "2015",
      "2016",
      "2017"
    ]
  },
  "stroke": {
    "show": true,
    "curve": "straight",
    "width": 2,
    "colors": [
      "#0000ff",
      "#008000"
    ]
  },
  "legend": {
    "position": "right",
    "offsetY": 100,
    "height": 230
  },
  "title": {

  }
}

var chart = new ApexCharts(document.querySelector('#ChartID-2rhiatbe'),
  options
);
chart.render();