How can I have a Highcharts chart fill parent height?

Question

I have a chart which I would like to fill 100% of the parent's height.

I have seen numerous other questions on this topic, most of which point back to a solution similar to what is described in the Highcharts docs, in that I should be using containerProps={{ style: { height: '100%' } }}. However for some reason this isn't working for me. The only way i have managed to get it to work, is to get the absolute height of the parent div, and set the container's height to the absolute pixel value, which I would like to avoid.

The image below shows that the containerProps is actually applying...the background color works, and shows that the height is 100%, but height of the chart is still the default 400px.

const chartRef = useRef<HighchartsReactRefObject>(null);

  // This useEffect was a desperation move that made no difference
  useEffect(() => {
    chartRef.current?.chart.reflow();
    console.log('reflow');
  }, [chartRef]);

  return (
    <HighchartsReact
      containerProps={{
        style: { height: '100%', backgroundColor: 'goldenrod' },
      }}
      ref={chartRef}
      highcharts={Highcharts}
      options={options}
    />
  );

Answer 1

Informed by maintainers that this is related to the implementation of highcharts react. Addressed by making the outer element height 100% at a style level. It is very important to note that it is at a style level. Doing this using a tailwind h-full does NOT work

 <div style={{ height: "100%" }}>
      <HighchartsReact
        containerProps={{ style: { height: "100%" } }}
        highcharts={Highcharts}
        options={options}
      />
</div>

Edit to say, that a member of my team made a pretty cool discovery... If the container props's height 100% is set using tailwind's h-full, then it just works. Curious as to why, but project pressures don't allow me to dig deeper.

      <HighchartsReact
        containerProps={{className: "h-full"}}
        highcharts={Highcharts}
        options={options}
      />