Horizontal Scrolling In Svg

JSFiddle body { background-color: #111111; color: #ffffff; /*max-width: 100%;*/ overflow-x: hidden; } .row { max-width: 100rem; } .svgrow { min-width: 70rem

Solution 1:

In order for the scrolling to happen, you have to give the container a fixed width. The contents (the SVG) needs to have a width that is greater than the container element. Usually that means giving it a specific width, because otherwise it will just resize to its container.

.svgrow {
    max-width: 100vw;
    overflow-x: auto;
}
.svgrow svg {
    min-width: 70rem;
}

/* My CSS */body {
	overflow-x: hidden;
}
.row {
	max-width: 100rem;
}
.svgrow {
    max-width: 100vw;
    overflow-x: auto;
}
.svgrow svg {
    min-width: 70rem;
}
svg {
    margin-bottom: 2.5em;
}
.off-canvas-toolbar {
	position: fixed;
	height: 100%;
	width: 8%;
}

<divclass="container"><divclass="off-canvas position-left"id="sidebar"data-off-canvas></div><divclass="off-canvas-content"data-off-canvas-content><divclass="off-canvas-toolbar"><divclass="custom-menu-icon"data-toggle="sidebar"><iclass="fa fa-bars">Icon</i></div></div><divclass="row svgrow"><divclass="small-12 columns"><h1>Title</h1><svgversion="1.2"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 2000 1000"><polygonpoints="0,1000 60,0 2000,0 2000,1000"fill="#fdedbc"></polygon><polygonpoints="70,1000 970,0 1800,1000"fill="#7c5b18"></polygon></svg></div></div><divclass="row"><divid="searchResult"class="small-12 columns"style=""><h2class="center">Search Results</h2><divclass="small-12 medium-6 large-4 columns"><divclass="searchResult"><divclass="caption">
                            Test <spanclass="creator">by User</span></div></div></div><divclass="small-12 medium-6 large-4 columns"><divclass="searchResult"><divclass="caption">
                            Test <spanclass="creator">by User</span></div></div></div><divclass="small-12 medium-6 large-4 columns"><divclass="searchResult"><divclass="caption">
                            Test <spanclass="creator">by User</span></div></div></div></div></div></div></div>