Overflow-Y for SVG with viewBox in nested Div doesnt work

Question

I made the following fiddle to illusstrate my problem:

https://jsfiddle.net/a876hjum/1/

HTML

<div class="main">
  <div class="chartWrapper">
    <div class="emptyExample">
      <svg fill="none" stroke="none" stroke-width="1.5" unselectable="on" preserveAspectRatio="xMidYMid meet" viewBox="0 0 180 380" height="100%" width="100%">
        <line x1="0" y1="0" x2="40" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
      </svg>
    </div>
  </div>
</div>

CSS

.main
{
  height: 400px;
  width: 400px;
  background-color: yellow;
  padding: 5px;
}

.chartWrapper
{
  height: 100%;
  width: 100%;
  background-color: grey;
  overflow-y: scroll;
}

I built this off from a current project, where i would expect that svg to be scrollable in height. From my understanding, with the currently set height and width on the parent and the viewBox on the SVG, there should be no scrolling. When making .main smaller, scrolling should be needed. Where is my mistake? I guess it's just some misunderstanding on my side in terms of how svg works...

Answer 1

there are a few things you should know:
1. the empty example is not necessary there.

<div class="main">
  <div class="chartWrapper">

      <svg fill="none" stroke="none" stroke-width="1.5" unselectable="on" preserveAspectRatio="xMidYMid meet" viewBox="0 0 180 380" height="300px" width="100%">
        <line x1="0" y1="0" x2="40" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
      </svg>

  </div>
</div>

2. your SVG should have height in px rather than % to make it scrollable when the parent div getting smaller, otherwise, it will fit into its parent.
   
3. in your CSS overflow-y: auto; is a better choice, to hide the scrollbar when it is not needed.
   
   I've updated your fiddle: https://jsfiddle.net/a876hjum/5/
   change the .main size to see how the scroll bar is hidden in larger sizes and shown in smaller ones.