Flex項目 - 填充剩餘容器的高度

Question

我試圖實現的目標是讓flex容器具有包含兩個項目的某個未知高度。第一個項目的高度固定爲100px，第二個項目應該填充容器的其餘部分。如何實現這一目標？這裏是我的代碼（注意：爲了測試目的，我已經爲容器設置了固定高度，正如我之前所說的，我不知道CSS中的高度，因此我無法將高度400px設置爲第二項）：

<div class="flex-container"> 
    <div class="flex-item" style="height:100px">111 111 11</div> 
    <div class="flex-item">x</div> 
</div> 

CSS

.flex-container { 
    padding: 0; 
    margin: 0; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    flex-direction: column; 

    align-items: stretch; 
    align-content: stretch; 
    flex-wrap: wrap; 
    height: 500px; 
    width: 300px; 
} 

    .flex-item { 
    background: tomato; 
    padding: 5px; 
    width: 300px; 

    color: white; 
    font-weight: bold; 
    font-size: 3em; 
    text-align: center; 
    } 

謝謝

PS：我想純CSS的解決方案，沒有JS

Answer 1

沒關係，我發現它：

添加到第二個項目這個CSS：

-webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 

http://codepen.io/anon/pen/lqdiI