1

I learned here: Multi columns list by css how to make a self adjusting multi column list. However there is one problem left: The container doesn't adjust it's width to it's content: https://jsfiddle.net/rkofktdz/3/

ul {
    height: 40px;
    display:inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    border: 2px solid black;
    background-color: grey;
    padding: 0;
}
li {
    list-style: none;
}
a {
    display: inline-block;
    width: 60px;
}
    <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    </ul>

I can extend the container (ul) by applying a fixed width but I would like to have it self adjusting. This is part of a three level menu being a bit more complex: http://nachrichtentisch.de/

Community
  • 1
  • 1
Sempervivum
  • 928
  • 1
  • 9
  • 21

1 Answers1

0

Please check if this is what you wanted to achieve:

https://jsfiddle.net/rkofktdz/4/

ul {
display:flex;
flex-wrap: wrap;
}
li {
    list-style: none;
    flex-direction: column;
    display: flex;
    border: 2px solid black;
    background-color: grey;
    height: 40px;
    padding: 0;
    margin: 0 10px;
}
a {
    display: inline-block;
    width: 60px;
}
Kuba Wojtach
  • 541
  • 3
  • 10
  • No, unfortunately not. Have a look at my snippet: Arrangement in two columns is just what I need but additionally I need to adjust the container's (ul's) width to it's content so that it encloses **both** columns. – Sempervivum Mar 06 '17 at 08:39