CSS Flexbox高度

Question

我正在嘗試進行聊天佈局。所以我有3個div，activeUSer - 頂部，消息中間（必須填充1和3之間的空格），動作 - 底部

現在，我已經把flex-direction排。它工作正常。如果輸入增長（如果您有2或更多行的寫入），我需要底部div增長

它工作正常，直到我添加顯示：flex到Actions div（底部）。我需要另一個用於輸入和按鈕的彈性佈局。現在，它不關心我已經在最後一個div

這裏設置填充是我codepen https://codepen.io/capraruioan/pen/XKWxrV

#content { 
    height: 300px; 
    display: flex; 
    flex-direction: column; 
} 

.activeUser { 
height: 66px; 
    background-color: yellow; 
} 

.Messages { 
    flex: 1 1 100%; 
} 
.Actions { 
    flex-grow: 1; 
    display: flex; 
    padding-top: 2px; 
    padding-bottom: 20px; 
} 
.aa { //the inputbox 
    border: 1px solid black; 
    min-height: 10px 
} 

Answer 1

由第3格，讓顯示器的默認，並把一個div與顯示器撓性內固定它