柔性容器沒有調整到內容

Question

我在這裏學到了： Multi columns list by css 如何進行自調整多列列表。然而有一個問題左：容器不調整它的寬度，以它的內容： 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>

我可以通過施加一個固定的寬度延伸的容器（UL），但我會喜歡自我調整。 這是一個三級菜單是一個稍微複雜一些的一部分： http://nachrichtentisch.de/

Answer 1

請檢查，如果這是你想達到什麼：

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; 
}