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

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


它在第一部分中包含一些文本，
第二部分中的代码镜像
第一部分中的文本几乎是固定的（因此它们的高度几乎是固定的），我希望代码镜像的高度完全填充页面的其余部分。如果代码镜像中有很多文本，请使用滚动。


然后，我做这个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），但现在找不到了。

最佳答案

为什么不使用height：100％而不是flex：1？

.rb .CodeMirror {
  height: 100%;
}

更新：

为了将来的用户，上述方法不起作用，但是使用calc时，Safari和Chrome都可以使用，因此：

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

其中80px是原始文章中所述的“第一部分”的高度。


Plunker