flexbox cross browser issues chrome displays correctly firefox does not

Trying to debug flexbox cross browser issues. I have a basic holy grail layout with scrollable content with fixed headers and a off-canvas left nav.

The layout displays correctly in Chrome 45.0.2421.0 m (64-bit) but not in Firefox 38.05

Picture of what it looks like in Chrome
enter image description here
Picture of what it looks like in Firefox
enter image description here

Problems in Firefox

1) No scroll bars

2) Footer is missing or off the page

3) Off-canvas left nav should not be visible until toggle button is clicked

4) Both side columns are not even with content column, the look slightly taller

Attached is the layout code

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");

html, body {
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.holy-grail {
    display: flex;
    flex-direction: column;
}

.body {
    flex: 1;
    display: flex;
    flex-direction: row;
    color: #333;
    background: #333;

}

.content-wrapper {
    flex: 1 1 auto;
    order: 2;
    background: #ffc94e;
    display: flex;
    flex-direction: column;
}

.content-header {
    flex: 0 0 50px;
    color: #eee;
    background: #2a2a2a;
}

.content {
    flex: 1;
    overflow: auto;
}

.button {
    cursor: pointer;
}

.button:before {
    content: 'f0c9';
    font: 42px fontawesome;
    color: white;
}

.nav-wrapper, .sidebar-wrapper {
    flex: 0 0 10em;
    display: flex;
    flex-direction: column;
}

.nav-wrapper {
    order: 1;
    transition: flex 1s
}

.nav-wrapper.isOpen {
    flex: 0 0 0;
}

.sidebar-wrapper {
    order: 3;
}

.nav-header, .sidebar-header {
    flex: 0 0 50px;
    color: #eee;
    background: #2a2a2a;
}

.nav-content, .sidebar-content {
    flex: 1;
    overflow: auto;
    color: white;
}

header {
    background: #92e4c9;
    height: 50px;
}

footer {
    background: #f7846a;
    height: 50px;

}
<!doctype html>
<html lang="en">
<head>
    <title>A Holy Grail Flexbox layout</title>

    <link rel="stylesheet" href="styles.css">
</head>
<body class="holy-grail">
<header>
    <h1>Header</h1>
</header>
<div class="body">
    <main class="content-wrapper">
        <header class="content-header">Content Header
            <a id='button' class="button"></a>
        </header>
        <div class="content">TEST
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            TestEnd
        </div>
    </main>
    <nav class="nav-wrapper isOpen" id="nav">
        <header class="nav-header">Header</header>
        <div class="nav-content">
          Nav
        </div>
    </nav>
    <aside class="sidebar-wrapper">
        <header class="sidebar-header">Header</header>
        <div class="sidebar-content">
            TEST
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            TestEnd
        </div>
    </aside>
</div>
<footer>
    <h2>Footer</h2>
</footer>
<script>
    document.getElementById('button').addEventListener("click", function (e) {
        document.getElementsByClassName('nav-wrapper')[0].classList.toggle('isOpen')
        e.preventDefault();
    });
</script>
</body>
</html>


Source: cross-browser

Leave a Reply