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
Post a Comment