css - 使代码镜像 block 填充 Safari 中页面的其余部分

Question

我要制作一个满足以下条件的页面:

• 它包含第一部分的一些文本和一个 第二部分代码镜像
• 第一部分中的文本几乎是固定的(因此它们的高度几乎是固定的)，我希望代码镜像的高度恰好填满页面的其余部分。如果代码镜像中有很多文本，则使用滚动。

然后，我做这个plunker :

<style>
    .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .rb .CodeMirror {
        flex: 1;
    }
</style>

<div class="rb">
    1<br/>2<br/>3<br/>4<br/>
    <textarea ng-model="body" ui-codemirror="option"></textarea>
</div>

它在 Chrome 中完美运行，但在 Safari 中不起作用:代码镜像的高度不正确；我们立即看到问题:

有人知道怎么解决吗？我曾经有一个使用 calc 的解决方案(减去一个固定的 px)，但我找不到了。

Answer 1

为什么不使用 height: 100% 而不是 flex: 1？

.rb .CodeMirror {
  height: 100%;
}

更新:

为了 future 的用户，上面的方法不起作用，但是对于 Safari 和 Chrome，calc 都起作用了，所以:

.rb .CodeMirror {
  calc(100% - 80px); /* notice the spaces around "-" */
}

其中 80px 是原始帖子中描述的“第一部分”的高度。

Plunker