Charts resize infinitely when placed under a flexbox with flex-direction: column

[wctiger]

Reproduce link

https://stackblitz.com/edit/highcharts-react-template-9oig96?file=src%2FApp.js

Steps to reproduce

1. Set a chart to fill its container height using the containerProps suggested in How can I make a chart fill its parent div #72
2. Set the container style as a vertical flexbox: <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
3. Insert a div without explicit height props between the container and the chart
4. Add an arbitrary element above the chart
5. Resize the width of the container, and the chart will start to self-resize its height infinitely

Expected behavior

I understand this set up is problematic as the container with explicit height is supposed to be direct parent of the chart. However highcharts should not resize infinitely but either do nothing or fail with an explicit error

[KamilKubik]

Hello wctiger!

Thanks for bringing up this issue, I agree it shouldn't resize the chart infinitely no matter the outer elements.

I did some more debugging, and it seems there's a problem with the reflow method in the Highcharts Core code. Since it's not directly related to the React integration, I highly encourage you to follow this thread for any further information.

My apologies for the inconvenience,
Kind Regards!

[wctiger]

Hello wctiger!

Thanks for bringing up this issue, I agree it shouldn't resize the chart infinitely no matter the outer elements.

I did some more debugging, and it seems there's a problem with the reflow method in the Highcharts Core code. Since it's not directly related to the React integration, I highly encourage you to follow this thread for any further information.

My apologies for the inconvenience, Kind Regards!

Thanks a lot for the timely reply, followed the thread and closing this.