CODEWITHSUNDEEP
javascripthtmlcsssvg
glace
glace

Reputation: 2210

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

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...

Upvotes: 1

Views: 201

Answers (1)

Abbas Nabilou
Abbas Nabilou

Reputation: 187

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>
  1. 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.
  2. 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.

Upvotes: 1

Related Questions