Chart in flex container overflows instead of shrinking when resized.

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]

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]

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