只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); 
}