The height of the code-mirror block are not the same in Chrome and Safari
I want to make a layout that satisfies the following conditions: 1) it has a block on the top whose height is up to its content 2) below it has a code-mirror and a block side by side, which fill in exactly the rest of the page in terms of height . I have made a plunker here. The problem is it works well in Chrome 57.0.2987.133 , whereas it does NOT work well in Safari 10.1 : the height of the code-mirror is NOT enough; it shows only 76 lines of the code rather than the correct 80 lines. Does anyone know how to fix this? <style> .rb { display: flex; flex-direction: column; height: 100%; } .rb