Question

尝试调试flexbox跨浏览器问题。我有一个基本的圣杯布局，可滚动的内容有固定的标题和离开画布的左导航。

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

Chrome中的图片 enter image description here 在Firefox中看起来像什么的图片

Firefox中的问题

1）没有滚动条

2）页脚丢失或不在页面中

3）在单击切换按钮之前，不应显示离开画布的左导航

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>

Answer 1

添加：

.body {
  min-height: 0;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

4.5 Implied Minimum Size of Flex Items

为flex items提供更合理的默认最小尺寸，   本规范引入了一个新的auto值作为初始值   中定义的min-width和min-height属性的值   CSS 2.1。

flexbox交叉浏览器问题chrome显示正确firefox没有

1 个答案: