How to disable SVG scroll? - html

Question

I'm trying to disable the scrolling of the svg. I tried to put the property overflow to hidden or visible but the svg still to scroll.
I created the jsfiddle here.
https://jsfiddle.net/pct8rL03/1/
.svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.wave-container {
display: inline-block;
position: absolute;
width: 100%;
vertical-align: middle;
overflow: hidden;
}
<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
</svg>
</div>
Thank you in advance

Answer 1

Try using this for your wave-container css and you don't need to give a position and display css for your svg. The css for your wave-container should be enough. Hope this helps
.wave-container {
width: -webkit-fill-available;
height: -webkit-fill-available;
vertical-align: middle;
overflow: hidden;
}
<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
</svg>
</div>

Answer 2

<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
</svg>
</div>
body{
margin:0px 0px;
padding:0px px;
}
.svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.wave-container {
display: inline-block;
position: absolute;
width: 100%;
vertical-align: middle;
overflow: hidden;
height:100%;
}

Answer 3

There is nothing to do here. Your SVG is just to big and add to much blank space at the bottom. To fix it just update your SVG file.
Not a good practice:
You can use the property overflow: hidden; on your .wave-container but to make it work you have to set a height or max-height to it