flex元素中的Chart.js溢出而不是缩小

Question

我曾尝试在chart.js的包装div上将min-width设置为0，但是如果拖动窗口，则图表会增长，然后不会缩小。

我想不通！我唯一能做的就是将width设置为99％，但是图表不再与其他div对齐。我已经为此工作了好几天，请帮忙！

问：如何使chart.js的宽度为100％，并增大/缩小到其边界大小。

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

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

这是我的StackBlitz工作示例

这是显示复制品的图片：

1. 图表尺寸正确，菜单打开

2. 关闭菜单时图表会增大（大小仍然正确）

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

Answer 1

（摘自我的评论。）

我无法运行StackBlitz（由于Firefox中的跟踪保护而导致JS错误），因此我无法验证这一点，但是我在flex布局中遇到了确切的问题，并通过确保overflow: hidden在父级（和祖先）上进行设置来解决了该问题弹性元素。粗略查看CSS会发现此操作仅在上完成.page-wrapper。

Answer 2

将画布包裹在宽度为 100% 的 div 中并将画布设置为最大宽度 100% 对我来说很有效：

<div style="width: 100%; position: relative;">
    <canvas id="chart" style="max-width: 100%;"></canvas>
</div>