Chart.js in flex element overflows instead of shrinking

I have tried setting the min-width to 0 on the wrapper div for chart.js, but the chart will grow and then not shrink back down if you drag the window around.

I can't figure it out! The only thing I can do is set width to 99% but then the chart is no longer aligned with my other divs. I've been working on this for days, please help!

Q: How can I get chart.js to be 100% width, and grow/shrink to it's bounding size.

to reproduce, go to the example and if you close the menu, the chart grows, and if you open it, the chart does not shrink back down. it maintains it's size and overflows to the right.

note: my actual project has two separate components for the chart and side bar. So a calc solution doesn't work in this case, I don't want to tightly couple any components to maintain good practice.

Here is my StackBlitz working example

here are pictures to show the reproduction:

1. chart is the right size, menu open

2. chart grows when you close the menu (the size is still correct)

3. open the menu, and the chart overflows right