html - Inline SVG making parent div bigger -


i'm trying create small dashboard app. since it's going on dashboard, want avoid having scroll @ costs. therefore set height/width of html/body tags 100%, , using percentages everywhere else not know screen sizes.

however when add inline svg, when set width 100% on svg element forces parent div bigger fit svg, instead of stopping when gets smaller size.

it's hard explain, did js fiddle:

https://jsfiddle.net/5khkzgk8/4/

it's basics layout of app. svg black rectangle fills svg.

svg {   width: 10%;   height: 100%; } 

currently svg width 10%, , works fine. if increase percentage 10% 10% , see how behaves see. (and have though happen) once fills height of div (in light blue), svg stop scaling up. happens continues scaling until width=100%, div big need scroll.

i'd grateful assistance. i'm weekend worrior in frontend/css i'm lost @ moment.

thanks!


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -