相同大小的 flexboxes 被 Highcharts 破坏了

Question

我正在尝试使用弹性项目创建两个高度相同的堆叠图表。

例如看下面的代码。两个图表容器 #chart1 和 #chart2 在图表尚未创建时确实具有相同的大小，但在创建图表后（通过单击按钮）不再如此。

一段时间后调用 chart.reflow() 没有帮助。我该怎么做才能解决这个问题？

document.getElementById('button').addEventListener('click', function () {
  const options = {
    chart: {backgroundColor: 'transparent'},
    title: {text: 'Test'},
    series: [{data: [[0, 0], [1, 3]]}]
  };

  const chart1 = Highcharts.chart('chart1', options);
  const chart2 = Highcharts.chart('chart2', options);
});

html, body {
  height: 100%;
  margin: 0;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#chart1 {
  background: lightcyan;
  flex-grow: 1;
}

#chart2 {
  background: lightyellow;
  flex-grow: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/9.2.1/highcharts.js"></script>

<div id="container">
  <button id="button">Load charts</button>
  <div id="chart1">Same size</div>
  <div id="chart2">Same size</div>
</div>

Answer 1

按照建议 here，您应该将 flex-basis: 0 和 overflow:hidden 添加到图表容器中。请注意，如果您有多个级别的 flexboxes，您应该在每个级别添加它。

#chart1 {
  background: lightcyan;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

#chart2 {
  background: lightyellow;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

相同大小的 flexboxes 被 Highcharts 破坏了

Same-size flexboxes are broken with Highcharts

css

highcharts

flexbox