Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Megan Weber
Megan Weber
28,554 Points

SVG Percentage Size

In my own little project I'm trying to make an inline svg fill its parent. I have this:

<svg width="100%" height="100%"></svg>

How come the width stretches as desired, but not the height?

Christhoper Key
Christhoper Key
Courses Plus Student 2,061 Points
Christhoper Key
Christhoper Key
Courses Plus Student 2,061 Points

You can try set CSS of "display: flex; width: 100%;"! This will make your svg to 100% witth of container in your html..

Megan Weber
Megan Weber
28,554 Points

If I set display: flex on the parent and flex-grow: 1 on the svg, it works, but the parent's scroll bars will still honor the svg's default size.

1 Answer

Megan Weber
Megan Weber
28,554 Points

I decided that I want to size the svg to its children rather than its parent, & I figured out how. EDIT: I figured out the answer to my original question:

html, body, svg {
    height: 100%;
}
body {
    margin: 0;
}
svg {
    display: block;
    width: 100%;
}
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Nice! And thanks so much for coming back to update your question. Super helpful for other Community members to see.