使用Flexbox創建適合內容的雙列布局

Question

我有兩列布局。第1欄是一個標題。第2列是一個列表。

我想讓列適合內容。 （例如，第1列應該與其內容一樣寬）

我也希望列表是水平的。

我想使用Flexbox，因此我可以更改列表中的項目並使佈局相應地適應。

E.g.所以它看起來像這樣：

我怎樣才能做到這一點？

這裏是我的代碼（Codepen is here）：

<div class="wrapper"> 
<nav class="topics"> 
<span class="unit unit-header">Topics: </span> 
<ul id="list" class="list unit"> 
    <li><a href="#">All</a></li> 
    <li><a href="#">Topic 1</a></li> 
    <li><a href="#">Topic 2</a></li> 
    <li><a href="#">Topic 3</a></li> 
    <li><a href="#">Topic 4</a></li> 
    <li><a href="#">Topic 5</a></li> 
    <li><a href="#">Topic 5</a></li> 
    </ul> 
</nav> 
</div> 

.wrapper { 
    width: 960px; 
    margin: auto; 
    padding-top:20px; 
} 

.topics { 
    display: flex; 
} 

.unit { 
    flex: 1 auto; 
} 

.list { 
    display:flex; 
} 

.list li { 
    flex: 1 auto; 
} 

如果我添加以下代碼，它的工作原理：

.unit-header { 
    display: table; 
    padding-right: 5%; 
} 

然而，混合表柔性盒似乎有點哈克對我來說。有沒有更好的辦法？

Answer 1

你試過用這個來代替嗎？

.unit-header { 
    flex: 0 1 auto; 
} 

上述速記屬性是指：

柔性成長：0

彈性收縮：1

柔性基礎：汽車