我已经尝试在 chart.js 的包装器 div 上将最小宽度设置为 0,但是如果你拖动窗口,图表会变大,然后不会缩小。
我想不出来!我唯一能做的就是将宽度设置为 99%,但图表不再与我的其他 div 对齐。我已经为此工作了好几天,请帮忙!
问:如何让 chart.js 成为 100% 宽度,并增长/缩小到它的边界大小。
要重现,请转到示例,如果关闭菜单,图表会变大,如果打开菜单,图表不会缩小。它保持其大小并向右溢出。
注意:我的实际元素有两个独立的图表和边栏组件。因此 calc 解决方案在这种情况下不起作用,我不想紧密耦合任何组件以保持良好实践。
Here is my StackBlitz working example
这里有图片展示复制品:
最佳答案
(从 my comment 复制。)
我无法让 StackBlitz 运行(由于 Firefox 中的跟踪保护导致的 JS 错误)所以我无法验证这一点,但我在我的 flex 布局中遇到了这个确切的问题并通过确保 overflow: hidden 解决了它
是在父(和祖先)flex 元素上设置的。粗略地看一下您的 CSS 显示这仅在 .page-wrapper
上完成。
关于javascript - flex 元素中的 Chart.js 溢出而不是收缩,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52502837/