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

Question

我已经尝试在 chart.js 的包装 div 上将 min-width 设置为 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 来解决它父（和祖先）弹性元素。粗略查看一下您的 CSS 会发现这仅在 .page-wrapper 上完成。

Answer 2

更新：此解决方案停止使用 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-grid 中，也许这也起到了作用。

无论如何，我诊断出问题是这样的：即使我将{ responsive: true, maintainAspectRatio: false } 应用于chart.js 的选项，图表的大小也是固定的，这导致图表容器不会缩小（即使overflow: hidden被应用了，我不完全明白为什么）。这导致 chartjs 插入的 div 元素检测大小变化时不会改变其高度。

因此解决方案是简单地将画布上的高度覆盖为 100%： canvas {height: 100%!important}。

这允许画布容器缩小，从而导致尺寸检测 div 缩小，从而导致重新渲染画布，从而防止出现纵横比问题。

Answer 3

在这里，您的画布在绝对父级内具有宽度，因此建议使用 JavaScript 动态更改值（在您的情况下为角度）。但是由于您正在寻找基于 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/