Canvas画布横向滚动条不显示？父容器溢出属性失效的原因是什么？

canvas与父容器溢出属性失效分析

在使用Canvas结合JavaScript库（如fabric.JS）进行绘图时，常常遇到父容器溢出属性失效的问题，导致横向滚动条无法显示。本文将分析此类问题，并提供解决方案。

问题：父容器设置width: 100%; height: 100%; overflow: auto;，内部包含一个使用Fabric.js的setDimensions方法设置宽高的Canvas元素。当Canvas高度超过父容器时，纵向滚动条正常显示；但Canvas宽度超过父容器时，父容器却会被撑大，而不是显示横向滚动条。

原因：问题的核心在于父容器宽度设置width: 100%;。此设置使父容器宽度根据内容自适应调整。当Canvas宽度超过父容器时，父容器会自动扩大以容纳Canvas，从而导致overflow: auto失效。

解决方案：为父容器设置固定宽度。 可以将width属性设置为具体像素值（例如width: 800px;）或使用视口宽度（width: 100vw;，表示视口宽度）。这样，父容器宽度固定，当Canvas宽度超过此固定值时，overflow: auto将生效，显示横向滚动条。