javascript - flex 布局内可调整大小的窗口需要 SVG 滚动条

Question

当我想查看 SVG 图表的一小部分，用滚动条平移它时，我可以这样做:

<div style={{width: "800px", height: "500px", overflow: "scroll"} }>
 <svg className="gantt" xmlns="http://www.w3.org/2000/svg" 
      width="3000" height="450">
 </svg>
</div>

当外部div的宽度不是固定宽度时，如何得到同样的效果？

<div style={{width: "90%", height: "500px", overflow: "scroll"} }>

更新我发现上面的代码工作正常，除非放在 flex 布局中。请参阅下文了解我的解决方案。

Answer 1

这对我来说很好。

<div style="width: 90%; height: 500px; overflow: scroll;">
 <svg className="gantt" 
      width="3000" height="450">
 </svg>
</div>