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

CSS

Why doesn't my <ul> expand width to cover all the <li>?

Hey, I have a nav that I'm trying to create with flexbox. I want the <ul> to have a max height, and have the <li> push to a new column when there isn't enough space for it.

I have displayed the <ul> inline-flex. The <li> are jumping on to a new column, but the <ul> doesn't expand with the <li> - causing an overflowing effect

https://codepen.io/Woodenchops/pen/KGOYRK

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

I don't understand. You want the top level <ul> to expand and contract, and right now it's just always wide?

FYI your top level <ul> has a class "topul" but there are no CSS rules targeting that. Also, I'm not sure why it would be given the class "sub-menu" since it seems that it's the main menu and there are sub menus nested in it, but maybe I'm not following the purpose here.

1 Answer

Steven Parker
Steven Parker
231,248 Points

I'm not sure what you are expecting, but the ul cannot expand in height because of the max-height setting, and the width is explicitly set in the "threeColumn" class.

You'll need to remove one or more of the explicit constrictions if you want the size to be responsive.