vogomatix vogomatix - 1 year ago 86
CSS Question

SVG Scrollbars needed on resizeable window inside flex layout

When I want to see a small part of an SVG chart, with scrollbars to pan across it, I can do it like this:



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


How do I get the same effect when the width of the outer div is not a fixed width?

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


UPDATE
I have found that the code above works fine except when placed inside
flex
layout. See below for my solution.

Answer Source

Turns out the problem is that the SVG was a child of a flex div which seems to cause problems with sizing. The solution I have found is to place the SVG in an absolutely positioned container.

.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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download