Заставьте блок зеркала кода заполнить остальную часть страницы в Safari.

Почему бы вам не использовать height: 100% вместо flex: 1?

.rb .CodeMirror {
  height: 100%;
}

Обновление:

Ради будущих пользователей вышеописанное не сработало, но с calc сработало как для Safari, так и для Chrome, поэтому:

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

где 80px — высота «первой части», как описано в исходном посте.

Plunker

Он хотел бы дать вопрос попробовать.

Вы можете использовать em вместо vh.

1em = примерно 16px

Также из того, что я прочитал в w3schools: https://www.w3schools.com/cssref/css3_pr_flex.asp

Вам также нужно будет импортировать свойство браузера. Я предполагаю, что коррекция должна быть:

    <style>
    // just in case you didn't
    <!--
    html,body{
        height: 100%; // or 100vh
    }
    -->
    .rb {
        display: -webkit-flex; // for Safari
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        // remove this height: 100%;
        // otherwise should set 100vh to height
    }

    .rb .CodeMirror {
        // You may want to try auto instead of 1. 
        // As the size of the chrome for each browser is different.
        -webkit-flex: 1; // for Safari
        -ms-flex: 1; // for IE
        flex: 1;
    }
</style>

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

Пожалуйста, дайте мне знать, если это работает или нет. Благодарность!