Make the code-mirror block fill the rest of the page in Safari

I want to make a page that satisfies the following conditions:

• it contains some texts in the first part and a code-mirror in the second part
• the texts in the first part are almost fixed (so their height is almost fixed), and I want the height of the code-mirror to fill exactly the rest of the page. If there are many texts in the code-mirror, then use scroll.

Then, I make this 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>

It works perfectly in Chrome, it however does not work in Safari: the height of the code-mirror is incorrect; we see immediately the problem:

Does anyone know how to fix this? I used to have a solution with calc(minus a fixed px), but I cannot find it anymore.

Why don't you use height: 100% instead of flex: 1?

.rb .CodeMirror {
  height: 100%;
}

Update:

For the sake of future users, the above didn't work, but with calc it did for both Safari and Chrome, so:

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

where 80px is the height of the "first part" as described in the original post.

Plunker