如何讓Flexbox元素根據內容增長但不超過「flex：1」

Question

所以我有一個帶有兩個孩子的容器。第一個孩子是一個列表，第二個孩子是一個按鈕。

該按鈕應該有一個固定的高度像40px。如果我將列表設置爲「flex：1」，則它將增長到佔用容器的所有左側空間減去按鈕在底部使用的40px。

如何獲取列表，根據其內容（像一個正常的div）增長，但將只增長到最大消耗所有可用空間（溢出如果內容過大）

這裏是在html：

.container { 
 
    display: flex; 
 
    height: 300px; 
 
    width: 100px; 
 
    flex-direction: column; 
 
} 
 
.list { 
 
    display: flex; 
 
    flex: 1; 
 
    overflow-y: scroll; 
 
} 
 
.button { 
 
    display: flex; 
 
    height: 40px; 
 
}

<div class="container"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
    </ul> 
 
    </div> 
 
    <div class="button"> 
 
    View 
 
    </div> 
 
</div>

下面是一個例子： https://jsfiddle.net/odrbey4c/

第一個容器中的列表不應占用所有空間。它應該表現得像一個普通的div。 第二個容器中的列表沒有問題。

Answer 1

從列表中刪除flex:1 ...這就是你想要的。

但是，我相信你想要在容器底部的按鈕。所以只需將margin-top:auto添加到按鈕，它的工作原理。

哦，並將按鈕更改爲flex: 0 0 40px而不是應用高度，因此它不會收縮。

.container { 
 
    display: inline-flex; 
 
    /* for demo only */ 
 
    height: 300px; 
 
    width: 100px; 
 
    flex-direction: column; 
 
    border: 1px solid #ff0000; 
 
} 
 
.list { 
 
    display: flex; 
 
    background: #bbb; 
 
    overflow-y: scroll; 
 
} 
 
.button { 
 
    display: flex; 
 
    flex: 0 0 40px; 
 
    margin-top: auto; 
 
    background: #cccccc; 
 
}

<div class="container"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
    </ul> 
 
    </div> 
 
    <div class="button"> 
 
    View 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
     <li>Hello</li> 
 
    </ul> 
 
    </div> 
 
    <div class="button"> 
 
    View 
 
    </div> 
 
</div>