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>