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

Question

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

我不明白！我唯一能做的就是将width设置为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上完成。

Answer 2

在这里，您的画布的绝对父级内部具有宽度，因此建议使用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/

Answer 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网格中，也许这也起作用了。

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

因此解决方案是简单地将画布上的高度覆盖到100％： overflow: hidden。

这将使画布容器收缩，从而导致尺寸检测div收缩，从而导致画布的重新渲染，从而避免了宽高比问题。