（摘自我的评论。）
我无法运行StackBlitz（由于Firefox中的跟踪保护，出现JS错误），所以我无法验证这一点，但我在Flex布局中确实遇到了这个问题，并通过确保在父（和祖先）Flex元素上设置overflow: hidden来解决它。粗略查看一下CSS，发现这只在.page-wrapper上完成。

更新：此解决方案已停止与chart.js 3一起使用
我也遇到过类似的问题：

<div style="display: flex; flex-direction: column">
  <h2>...</h2>
  <div class="chart-container" style="position: relative; flex: 1">
    <canvas></canvas>
  </div>
  <span>...</span>
  <span>...</span>
</div>

我最外层的div是在一个css网格中，也许这也起了作用。
总之，我诊断出问题是这样的：尽管我对chart.js的选项应用了{ responsive: true, maintainAspectRatio: false }，但图表的大小是固定的，这会导致chart-container不收缩（即使应用了overflow: hidden，我也不完全理解为什么），这会导致chartjs插入的div元素检测到大小变化，而不会改变其高度。
因此，解决方案是简单地将画布上的高度覆盖为100%：canvas {height: 100%!important}。
这允许画布容器收缩，导致大小检测div收缩，从而导致画布的重新呈现，从而防止出现纵横比问题。

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

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

这里你的画布宽度在绝对父元素之内，所以建议你使用JavaScript动态地改变这个值（在你的例子中是Angular 的）。但是，因为你正在寻找基于CSS的解决方案，这里是你可以添加到你的app.components.css文件中的：

.sidebar-wrapper.shrink + div.main-wrapper canvas {
  width: calc(100vw - 40px) !important;
}
.sidebar-wrapper:not(.shrink) + div.main-wrapper canvas {
  width: calc(100vw - 230px) !important;
}

下面是一个工作示例：https://chartjs-overflow-ex-vlsqmn.stackblitz.io/