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

【问题标题】：SVG Scrollbars needed on resizeable window inside flex layoutflex布局内可调整大小的窗口需要SVG滚动条
【发布时间】：2018-01-21 04:58:01
【问题描述】：

如果我想查看 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 布局中。请参阅下面的解决方案。

【问题讨论】：

标签： javascript css reactjs svg flexbox

【解决方案1】：

这对我来说很好。

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

【讨论】：

我有一种感觉，我之前的一些 CSS 可能会干扰，将不得不进行调查。可能与 flex 相关。

【解决方案2】：

原来问题在于 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>

【讨论】：