Codemirror: Incorrect height when inside a flexbox container

Created on 2 Dec 2015 · 4Comments · Source: codemirror/CodeMirror

The .CodeMirror-scroll element has the wrong height when the editor is inside a flexbox container. I've tested in Firefox and Chrome (Ubuntu 15.10), but the problem only occurs in Chrome. This may need to be reported as a browser bug instead. Here is a test case:

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body{ height:100%; }
        body{
            margin:0;
            display:flex;
            flex-direction:column;
        }
        .CodeMirror{
            margin:10px;
            border:1px solid black;
            flex-grow:1;
        }
    </style>
    <link rel="stylesheet" href="lib/codemirror.css">
    <script src="lib/codemirror.js"></script>
</head>
<body>
    <script> CodeMirror(document.body, {lineNumbers: true}); </script>
</body>
</html>

Source

Azmisov

Most helpful comment

Just spent a couple of hours trying to fix it. In case it helps anyone, one way is to set parent as position=absolute and height=100%. And then apply display=flex and position=relative to grandparent.

abhishiv on 14 Jan 2016

👍10 ❤2

All 4 comments

This is a Chrome bug. See also #3231. If you want to spend energy on creating a minimal (without CodeMirror) reproducing page and reporting it to the Chrome people, that'd be awesome (the bug is that height: 100% doesn't use the parent's height, even if that is position: relative, when that parent is in a flex container).

marijnh on 3 Dec 2015

Closing since there doesn't seem to be a known workaround that CodeMirror could apply (if you find one, do comment).

marijnh on 3 Dec 2015

abhishiv on 14 Jan 2016

👍10 ❤2

Just spent a couple of hours trying to fix it. In case it helps anyone, one way is to set parent as position=absolute and height=100%. And then apply display=flex and position=relative to grandparent.

U just saved me bruh!