Apexcharts.js: Chart in flex container overflows instead of shrinking when resized.

[oneezy]

Bug report

I have 2 codepen examples, one showing the expected behavior and the second showing the wrong behavior. I have a css grid layout where I'm including 2 charts inside 1 grid-template-column. The charts widths need to dynamically update to the column width which is 1 fr or 50%. When I have 1 chart it works as expected. When I have 2 charts the layout breaks.

Video Example: https://www.youtube.com/watch?v=654eoVkD8Rc

Codepen (working): https://codepen.io/oneezy/pen/RwrEgxr
Codepen (not working): https://codepen.io/oneezy/pen/RwrEgvo

Explanation

What is the behavior you expect?
I expect both charts to stay 100% width of parent container

What is happening instead?
The brush charts dynamic width is not updating correctly thus breaking the layout

What error message are you getting?
No error messages

[junedchhipa]

Thanks for the detailed explanation. I can see the issue when using charts in Grid/FlexBox.
It will be addressed soon.

[oneezy]

Great! thanks for your quick response and look forward to the fix

[junedchhipa]

Adding overflow: hidden on the parent flex elements fixes this issue.
https://stackoverflow.com/questions/52502837/chart-js-in-flex-element-overflows-instead-of-shrinking

So, in your case, add overflow: hidden to #ChartWrapper

[junedchhipa]

Closing the issue.
I hope the workaround I provided fixes the issue. If not, feel free to re-open or let me know.

[oneezy]

wow that was so simple! nicely done