Make container expand when new columns are created

Question

I have really big problem with flex boxes and can't find any answer to this. Below I will put some code. A problem is that a black background doesn't expand to right with a content. Do you have any idea how to fix that? How to force container to expand depending on content number of columns?

The goal is to reach something like that: https://i.stack.imgur.com/xXxmP.jpg

.categories li ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  width: auto;
  padding-left: 0;
  background-color: black;
  color: red;
  max-height: 200px;
}

.categories li ul li {
  margin-right: 20px;
}

<ul class="categories">
  <li>
    <a href="#">Categories</a>
    <ul>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
    </ul>
  </li>
</ul>

What do you want it to look like? I'm not sure what you mean reading your question. — chevybow, May 30 '18 at 19:15
I mean the second column of Aaa's have no background. I have a lot of categories names and I want to put them next to each other. But .categories > ul width is only on the first one column — Rabus, May 30 '18 at 19:19

score 0 · Answer 1 · answered May 30 '18 at 19:26

Remove position: absolute; style

.categories li ul {
    list-style: none;
   
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
    padding-left: 0;
    
    background-color: black;
    color: red;
    max-height: 200px;
   }
   
.categories li ul li { 
    margin-right: 20px;
   }

<html>
<body>
  <ul class="categories">
   <li>
    <a href="#">AAAAAAAAAA</a>
    <ul>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
    </ul>
   </li>
  </ul>
</body>
</html>

but list have 100% width now. I want it to have width equal to number of columns — Rabus, May 30 '18 at 19:28
I am afraid this is how it works, not sure if this can be achieved without modifying your styles a lot. Will look into it in morning if you find no answers till then. — Nandita Sharma, May 30 '18 at 19:31

score 0 · Answer 2 · answered May 30 '18 at 19:27

It seems like your result can be done if you just change the selectors for your CSS

.categories li ul {
    list-style: none;
   
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
    position: absolute;
    width: auto;
    padding-left: 0;
    
    max-height: 200px;
   }
   
.categories li ul li { 
    margin-right: 20px;
   }

.categories ul > li {
    background-color: black;
    color: red;
}

<html>
<body>
  <ul class="categories">
   <li>
    <a href="#">AAAAAAAAAA</a>
    <ul>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
     <li>Aaa</li>
    </ul>
   </li>
  </ul>
</body>
</html>

But there is still a plenty of white space. I want it to look like this. https://imgur.com/a/4ETPJS6 — Rabus, May 30 '18 at 19:32

score 0 · Accepted Answer · answered May 30 '18 at 20:31

Is this something you're looking for?

Note: You need to grow your last child in the column to get the black background to entire height.

.categories {
  display: flex;
}

.categories > li {
  display: flex;
  flex-direction: column;
}

.categories li ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-left: 0;
  color: red;
  max-height: 200px;
  min-height: 200px;
  list-style: none;
  background-color: black;
}

.categories li ul li {
  margin-right: 20px;
  background-color: black;
}

.categories li ul li:last-child {
  flex:1;
}

<body>
  <ul class="categories">
    <li>
      <a href="#">Categories</a>
      <ul>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
      </ul>
    </li>
  </ul>
</body>

oh yeah! That's perfect! thank you very much! :D – Rabus May 30 '18 at 21:01 — Rabus, May 30 '18 at 21:01

Make container expand when new columns are created

3 Answers3