无法在Firefox中使用CSS网格fr单元计算的高度百分比

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>