需要对调整大小的窗口柔性布局内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"} }> 

UPDATE 我发现上面的代码工作时，放在里面flex版面，但罚款。请参阅下面的解决方案。

Answer 1

原来，问题是，SVG是一个flex DIV这似乎引起上浆问题的孩子。我发现的解决方案是将SVG放置在绝对定位的容器中。

.svg { 

    // actual size of svg... 
    width: 3000px; 
    height: 575px; 


    // outer div to lock absolute position against... 
    &__outer { 
    position: relative; 
    width: 100%; 
    height: 600px; 
    padding: 5px; 
    } 

    // inner div for scrolling... 
    &__container { 
    position: absolute; 
    width: 99%; 
    height: 600px; 
    overflow: auto; 
    } 

<div className="svg__outer"> 
    <div className="svg__container"> 
    <svg className="svg" xmlns="http://www.w3.org/2000/svg"> 
    </svg> 
    </div> 
</div> 

Answer 2

这对我来说很好。

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