javascript - flex 元素中的 Chart.js 溢出而不是收缩

Question

我已经尝试在 chart.js 的包装器 div 上将最小宽度设置为 0，但是如果你拖动窗口，图表会变大，然后不会缩小。

我想不出来!我唯一能做的就是将宽度设置为 99%，但图表不再与我的其他 div 对齐。我已经为此工作了好几天，请帮忙!

问:如何让 chart.js 成为 100% 宽度，并增长/缩小到它的边界大小。

要重现，请转到示例，如果关闭菜单，图表会变大，如果打开菜单，图表不会缩小。它保持其大小并向右溢出。

注意:我的实际元素有两个独立的图表和边栏组件。因此 calc 解决方案在这种情况下不起作用，我不想紧密耦合任何组件以保持良好实践。

Here is my StackBlitz working example

这里有图片展示复制品:

1. 图表大小合适，菜单打开

2. 当您关闭菜单时图表会变大(大小仍然正确)

3. 打开菜单，图表向右溢出

Answer 1

(从 my comment 复制。)

我无法让 StackBlitz 运行(由于 Firefox 中的跟踪保护导致的 JS 错误)所以我无法验证这一点，但我在我的 flex 布局中遇到了这个确切的问题并通过确保 overflow: hidden 解决了它 是在父(和祖先)flex 元素上设置的。粗略地看一下您的 CSS 显示这仅在 .page-wrapper 上完成。