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

Question

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

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

Then I create 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 fine in Chrome, however it does not work in Safari: the height of the mirror code is incorrect; we immediately see the problem:

Does anyone know how to fix this? I used to have a solution with calc (minus a fixed number of px), but I can no longer find it.

Answer 1

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

 .rb .CodeMirror { height: 100%; } 

Update

For future users, the above did not work, but with calc, it did both for Safari and Chrome, therefore:

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

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

Plunker

Answer 2

He would like to try it.

You can use em instead of vh.

1em = approximately 16px

Also from what I read from w3schools: https://www.w3schools.com/cssref/css3_pr_flex.asp

You will also need to import the browser property. I assume the fix should be:

  <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> 

Please let me know if this works or not. thanks!