仅将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);
}