如何在Firefox中强制溢出未定义大小的flexbox元素？

Question

以下代码可以在Chrome中完美地运行，但在Firefox中则不行。您会注意到页眉，页脚和侧边栏的高度未定义，但侧边栏仍将沿y轴溢出内容。这在Chrome 40.0.2214.94 64位中是正确的，但在Firefox 35.0.1中不正确。我应该用什么CSS来使它工作？

此外，如果您无法运行以下代码段here is a CodePen-hosted version。

html,
body {
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
.container {
  width: 100vw;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  max-height: 100vh;
  overflow: auto;
}
header,
footer {
  padding: 1rem;
  width: 100%;
}
header {
  background: tomato;
}
.sidebar-1,
.sidebar-2 {
  padding: 1rem;
  overflow-y: scroll;
  max-width: 20vw;
}
.content-container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
}
.sidebar-1 {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  box-ordinal-group: 3;
  -webkit-order: 3;
  -moz-order: 3;
  order: 3;
  -ms-flex-order: 3;
  background: #afc5cf;
}
.main-content {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
  -webkit-order: 2;
  -moz-order: 2;
  order: 2;
  -ms-flex-order: 2;
  background: #e6e6e6;
}
.sidebar-2 {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
  -webkit-order: 1;
  -moz-order: 1;
  order: 1;
  -ms-flex-order: 1;
  background: #cfafaf;
}
footer {
  background: #bacfaf;
}

<div class="container">
  <header>
    <h1>Hello</h1>
  </header>
  <div class="content-container">
    <aside class="sidebar-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
    </aside>
    <aside class="sidebar-2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsa officia, officiis, atque nam nobis aut est odit dolorem quo voluptatibus reprehenderit illum, rerum sint dolores beatae eaque, ea minima!</p>
    </aside>
    <section class="main-content"></section>
  </div>
  <footer>
    <h2>world</h2>
  </footer>
</div>

Answer 1

.container {
     overflow: auto !important;
}

Answer 2

我意识到.content-container没有溢出属性。添加修复它！