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將生效，顯示橫向滾動條。