플렉스 컨테이너가 내용물에 맞지 않음

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