只Flexbox增長到窗口大小，而不是內容

Question

我想有2個div填充屏幕，一個在頁面的底部，一個是「主」內容區域。

我創建了一個的jsfiddle證明什麼，我需要：https://jsfiddle.net/zmnogytL/1/
的HTML是這樣的：當其含量超過其高度

<div id="parent"> 
    <div class="messages"> 
     <span id="jstext"></span> 
    </div> 
    <div class="input-area"></div> 
</div> 

主要的div（灰色的）不應該擴大，而是在其中有一個滾動條。 較低的div（藍色）應該始終保持在同一個位置。

經過無數個小時後，我仍然沒有按照自己想要的方式工作。

在此先感謝！

Answer 1

試試：

.messages{ 
    overflow:scroll; 
    max-height: calc(100% - 100px); 
}