How to Cover the Rest of the Page?

v5
1

I have a page. It has an iframe but I will only share the iframe. I don’t think it’s related to the original page.
I know my programming skills are questionable. It’s definitely my mistake. The buttons are for saving and saving as a file.
What I want to achieve is the editos to touch the bottom of the page. So I see a full screen and If I want I can scroll in any of the editos, not the page.
Sorry, it is possible but I couldn’t made the code smaller, my bad.
Thanks for your help.

The code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B</title>
    <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
    <link rel="stylesheet" type="text/css" href="codemirror/addon/fold/foldgutter.css">
    <link rel="stylesheet" type="text/css" href="codemirror/addon/scroll/simplescrollbars.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: sienna;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 12px;
            height: 100vh;
            /* height: 100%; */
            /* overflow: hidden; */

            justify-content: stretch;
        }
        nav {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        #editors {
            display: flex;
            /* align-items: stretch; */
            flex-grow: 1;
            /* width: 100%; */
            gap: 12px;
        }
        .editorWrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            /* height: 100%; */
        }
        .codeMirrorContainer {
            flex-grow: 1;
            /* height: 100% */
        }
        .CodeMirror {
            /* height: auto; */
        }
    </style>
</head>
<body>
    <nav>
        <button>
            <span>Button1</span>
        </button>
        <button>
            <span>Button2</span>
        </button>
    </nav>
    <div id="editors">
        <div class="editorWrapper">
            <span class="editorTitle">editor1</span>
            <div id="editor1" class="codeMirrorContainer codeMirrorBreakAll cm-theme-override" spellcheck="false">
            </div>
        </div>
        <div class="editorWrapper">
            <span class="editorTitle">editor2</span>
            <div id="editor2" class="codeMirrorContainer codeMirrorBreakAll cm-theme-override" spellcheck="false">
            </div>
        </div>
        <div class="editorWrapper">
            <span class="editorTitle">editor3</span>
            <div id="editor3" class="codeMirrorContainer codeMirrorBreakAll cm-theme-override" spellcheck="false"></div>
        </div>
    </div>
    <script src="codemirror/lib/codemirror.js"></script>
    <script src="codemirror/addon/selection/active-line.js"></script>
    <script src="codemirror/addon/fold/foldcode.js"></script>
    <script src="codemirror/addon/fold/foldgutter.js"></script>
    <script src="codemirror/addon/scroll/simplescrollbars.js"></script>
    <script>
        const options = {
            autofocus: true,
            foldGutter: true,
            gutters: ["CodeMirror-foldgutter", "CodeMirror-linenumbers"],
            lineNumbers: true,
            lineWiseCopyCut: true,
            lineWrapping: true,
            mode: "text/plain",
            scrollbarStyle: "overlay",
            styleActiveLine: { nonEmpty: true },
            viewportMargin: Infinity,
        };
        const editor1 = new CodeMirror(document.querySelector("#editor1"), options);
        const editor2 = new CodeMirror(document.querySelector("#editor2"), options);
        const editor3 = new CodeMirror(document.querySelector("#editor3"), options);
    </script>
</body>
</html>
3

Solved it. The CSS should be something like this.

CSS

`
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

    body {
        background-color: sienna;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        height: 100vh;
        justify-content: stretch;
    }

    nav {
        display: flex;
        gap: 10px;
        flex-shrink: 0;
    }

    #editors {
        display: flex;
        flex-grow: 1;
        overflow: hidden;
        gap: 12px;
    }

    .editorWrapper {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
        gap: 8px;
    }

    .editorTitle {
        flex-shrink: 0;
    }

    .codeMirrorContainer {
        flex-grow: 1;
        overflow: hidden;
    }

    .CodeMirror {
        height: 100%;
    }
</style>`