使用flex实现等高Highcharts图表时渲染后尺寸不一致如何解决

问题原因 #

当前代码仅为图表容器设置了flex-grow: 1，而flex布局的子元素尺寸由flex-grow、flex-shrink、flex-basis三个属性共同决定，默认flex-basis值为auto，会优先参考元素的内容高度计算尺寸。Highcharts初始化时会自动写入inline高度，两个容器的初始内容高度计算存在差异，导致最终flex分配的高度不一致，chart.reflow()是基于当前容器高度重绘图表，不会修正容器本身的flex分配逻辑，因此无效。

解决方案 #

1. CSS层面修复（核心修复）

将两个图表容器的flex属性修改为flex: 1，这是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，会让flex布局完全忽略内容本身的高度，等分父容器的剩余可用空间。同时添加min-height: 0兼容部分浏览器下flex子元素高度溢出的问题：

#chart1 {
  background: lightcyan;
  flex: 1;
  min-height: 0;
}

#chart2 {
  background: lightyellow;
  flex: 1;
  min-height: 0;
}

2. 图表配置补充（可选，适配性更强）

在Highcharts的初始化配置中显式指定图表高度为100%，让图表完全适配容器高度，避免图表自身修改容器尺寸：

const options = {
  chart: {
    backgroundColor: 'transparent',
    height: '100%' // 新增该行
  },
  title: {text: 'Test'},
  series: [{data: [[0, 0], [1, 3]]}]
};

以上两个修改配合使用即可完全解决两个图表高度不一致的问题。

内容的提问来源于stack exchange，提问作者Blackhole