内容に適合しないフレックスコンテナ

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）を拡張することができますが、私は希望それを自己調整するのが好きです。 これはもう少し複雑で3つのレベルのメニューの一部です：これはあなたが達成するために望んであれば 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; 
}