How do I make the background of a flex UL stretch for a dynamic number of columns?

Question

I am trying to style a main navigation component, but I'm having trouble getting the background to stretch for a dynamic number of wrapped columns in the submenu popup. Can anyone help with this jsfiddle? I have exhausted my admitidly limited knowledge of CSS as well as anything I could find through google.

The markup comes from a content management system, so I have limited control of the generated markup, other than adding additional CSS classes, although I have full control over the CSS.

I almost got it working properly using column-count, but the number of columns need to be dynamic. I found other posts mentioning using display: flex, but still can't quite get the combination of flex and inline-block working properly.

This is the layout I am trying to achieve:

.container {
  display: flex;
  position: relative;
}

.container a {
  text-decoration: none;
  color: #424242;
}

ul {
  list-style: none;
}

.main-navitation>.component-content {
  position: absolute;
  bottom: 0;
  right: 0;
}

.rel-level1 {
  display: inline-block;
  padding: 10px;
  position: relative;
}

.rel-level1>ul {
  display: flex;
  position: absolute;
  top: 30px;
  left: 0;
  background: #e1e1e1;
  border: 1px solid #c2c2c2;
  padding: 5px;
  max-height: 200px;
  flex-wrap: wrap;
  flex-direction: column;
}

.rel-level1>ul>li {
  display: block;
}

.rel-level2 {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 1 auto;
  flex-basis: 100%;
  width: 85px;
}

.rel-level2>a>.navigation-title {
  display: inline-block;
  font-weight: bold;
}

.rel-level2>ul {
  padding-left: 0;
}

.rel-level3 {
  padding-top: 3px;
  display: inline-block;
  width: 85px;
}

.rel-level3>a>.navigation-title {
  border-bottom: solid 1px transparent;
  display: inline-block;
  font-size: 14px;
}

Thanks!

user_4765934 · Answer

It's a combination of factors:

You have your flex-direction set to column, when you're wanting row (which is actually the default, so you can remove the property from your CSS entirely), have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
You've set a max-height to try to force the child elements to flow horizontally, alongside using flex-wrap: wrap. Neither of these properties are required if you change your flex-direction.

user_490454 · Answer

FYI, you can further simplify your HTML code, and even if you don't know CSS well, remove those rules which reference the unnecessary HTML code that can be removed:

ul {
  list-style: none;
}

.rel-level1 {
  display: inline-block;
  padding: 10px;
  position: relative;
}

.rel-level1>ul {
  display: flex;
  position: absolute;
  top: 30px;
  left: 0;
  background: #e1e1e1;
  border: 1px solid #c2c2c2;
  padding: 5px;
  max-height: 200px;
  flex-wrap: wrap;
  flex-direction: column;
}

.rel-level1>ul>li {
  display: block;
}

.rel-level2 {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 1 auto;
  flex-basis: 100%;
  width: 85px;
}

.rel-level2>a>.navigation-title {
  display: inline-block;
  font-weight: bold;
}

.rel-level2>ul {
  padding-left: 0;
}

.rel-level3 {
  padding-top: 3px;
  display: inline-block;
  width: 85px;
}

.rel-level3>a>.navigation-title {
  border-bottom: solid 1px transparent;
  display: inline-block;
  font-size: 14px;
}

That said, your question is a duplicate of this post.

How do I make the background of a flex UL stretch for a dynamic number of columns?

2 Answers