无法使用在Firefox中使用CSS网格fr单位计算的％高度

Question

我正在尝试让浏览器使用CSS Grid和fr单位计算元素的高度，然后使用%单位向下传递该高度，以便使滚动工作无需手动设置高度的子元素。

下面是一个最小的示例。它具有动态高度的标头，并且无需设置硬编码高度/无需在Chrome和Safari中使用JavaScript，就可以在内容区域（#scroll-container）内滚动滚动。但这在Firefox [JSFiddle]中不起作用。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #20262E;
  font-family: Helvetica;
  overflow: hidden;
}

#page {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: auto;
}

header {
  background: dodgerblue;
}

#content {
  background: hotpink;
  display: grid;
  grid-template-columns: 1fr 4fr;
  overflow: auto;
}

div.sidebar {
  background-color: darkgray;
}

main {
  height: 100%;
  overflow: auto;
  background-color: darkcyan;
}

#content-table {
  display: table;
  height: 100%;
  overflow: auto;
  border-collapse: separate;
  border-spacing: 10px 0;
  background: orange;
}

div.column {
  display: table-cell;
  height: 100%;
  overflow: auto;
  padding: 10px;
  background-color: hotpink;
}

#scroll-container {
  height: 100%;
  overflow: auto;
  padding: 10px;
  background: green;
}

<div id="page">
  <header id="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi assumenda, neque qui cum quas similique totam in quibusdam optio inventore vero explicabo dignissimos quaerat fugit. Placeat, autem voluptate praesentium ad ab alias, cumque, incidunt
    dolore fuga facere error labore molestias.
  </header>
  <section id="content">
    <div class="sidebar"></div>
    <main>
      <div id="content-table">
        <div class="column"></div>
        <div class="column">
          <div id="scroll-container">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis similique atque est blanditiis fugit natus, facere reiciendis, aut quisquam libero. Incidunt et veritatis, obcaecati tenetur tempora iusto numquam nostrum excepturi atque rem fugit sed
            rerum molestias aliquid, beatae. Illo iure, ab sit accusamus quae, laborum soluta dicta a corporis in assumenda id maiores delectus quo quia deserunt consectetur recusandae, commodi saepe porro necessitatibus, optio qui. Ipsum repellat aut
            excepturi quasi, quos, aperiam culpa? Nesciunt neque ex, nihil nulla animi aut voluptatum nisi quisquam ad error voluptas, soluta quibusdam itaque, ipsum ullam cupiditate molestias officia repudiandae debitis repellendus inventore praesentium
            iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam velit temporibus omnis unde reiciendis quam culpa, quidem repudiandae minima explicabo quod sunt impedit vitae ipsum iusto ex assumenda aut eius voluptatem! Quidem accusantium
            debitis, soluta laudantium quae blanditiis accusamus dicta alias in tenetur. Reprehenderit distinctio similique, iste cumque nisi doloremque eaque unde corporis earum quia, aperiam dolor modi. Maiores reiciendis, officia neque esse! Odio repudiandae
            fugiat vero porro expedita deleniti, unde beatae, dignissimos eum, quibusdam dicta quae. Culpa, recusandae, aut! Eligendi, harum. Quam hic incidunt ex nobis natus eveniet atque, error omnis ullam nemo! Perspiciatis veniam numquam sapiente
            consequatur tempore.</div>
        </div>
      </div>
    </main>
  </section>
</div>

这是在Chrome / Safari中的外观：

  

它在Firefox中如何工作：

  

有人知道为什么这在Firefox中不起作用吗？这是一个已知的错误？有跨浏览器解决方案吗？