flexbox 跨浏览器问题 chrome 显示正确 firefox 不

flexbox cross browser issues chrome displays correctly firefox does not

正在尝试调试 flexbox 跨浏览器问题。我有一个基本的圣杯布局，带有固定 headers 和 off-canvas 左导航的可滚动内容。

布局在 Chrome 45.0.2421.0 m（64 位）中正确显示，但在 Firefox 38.05 中显示不正确

它在 Chrome 中的样子图片 它在 Firefox 中的外观图片

Firefox 中的问题

1) 没有滚动条

2) 页脚丢失或不在页面上

3) Off-canvas 在点击切换按钮之前，左侧导航应该不可见

4) 两边的栏目与内容栏不齐，看起来稍微高一点

附上布局代码

@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>

添加这个：

.body {
  min-height: 0;
}


@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;
  min-height: 0;
}
.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>

你需要它，因为 Flexbox 模块改变了 min-height 的初始值：

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.