如何在 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 没有溢出属性。添加修复它！

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

How can I force overflow on an undefined-size flexbox element in Firefox?

css

firefox