仅将flexbox增加到窗口大小,而不是内容

时间:2017-06-16 09:04:54

标签: html css flexbox

我正在尝试在屏幕上填充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(蓝色)应始终保持在同一位置。

经过无数个小时,我仍然没有按照我想要的方式工作。

提前致谢!

1 个答案:

答案 0 :(得分:0)

试一试:

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