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
Picture of what it looks like in Firefox
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("http://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>
