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
Bryce Eason
1,918 PointsLayout issue using flexbox
I'm trying to figure out flexbox and had a layout issue I can't seem to fix. I'm trying to get the two sides (.left and .right) to extend the full height of the browser no matter what is in those containers.
I've tried height: 100%, height: auto, min-height: 100%, etc. What can I do to get the two sides to extend the entire height of the browser window?
Also, my navigation keeps pushing the left side bigger for some reason and I would like to prevent that and make the left side smaller (say 30% of the browser width). How would I accomplish that?
And any other code you see that I could improve on in say my navigation list to get it and the h1 the same width on the left side?
Here's a codepen for what I have so far.
http://codepen.io/rbeason/pen/rjgGMp
Thanks.
2 Answers
Kevin Korte
28,148 PointsI think the full height problem will be solved with something like normalize.css. Once I added it to your project, it fixed it. I think it's just default browser paddings.
Also, you nav bar is 30% wide, so I'm not sure there. The only thing that's kinda messing it up is the extra padding on the nav element. It ends up being 30% wide + 2em, and the body ends up being 70% - 2em.
Bryce Eason
1,918 PointsI actually figured it out. Just forgot to update the thread.
I solved it by adding the following:
html, body { height: 100%; } .wrapper { height: 100vh; }