Why is Firefox not applying overflow to my designated flex child element?

Question

I have a situation where a wide range of browsers are achieving my flex layout just fine, Firefox hasn't joined the party though.

In this codepen: https://codepen.io/davewallace/pen/WOPqQB (I removed browser prefixes for clarity) you can see that the .content element has overflow applied to it, and in other browser this induces scrollbars on this element when its contents are larger than the space it fills when flexing to fill the viewport.

(codepen uses SCSS, the following snippet is the result of that)

html, body {
  padding: 0;
  margin: 0;
}

html * {
  box-sizing: border-box;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  background: cyan;
}

.top {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  background: gray;
}
.top .inner {
  max-width: 1440px;
  border: 1px dashed black;
}
.top .inner .nav {
  height: 60px;
  border: 1px solid gold;
}

.bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0px;
  background: pink;
}

.left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 255px;
          flex: 0 0 255px;
  background: chocolate;
}

.content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  background: gold;
  padding: 30px;
  overflow: auto;
}
.content .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1155px;
  border: 1px dashed black;
}
.content-left {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 66.6%;
          flex: 1 0 66.6%;
  background: white;
}
.content-right {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 33.3%;
          flex: 1 0 33.3%;
  background: pink;
}

.sideblock {
  margin: 30px;
  padding: 20px;
  background: white;
}

<div class="container">
 <div class="site-msg">site msg<br />site msg</div>
 <div class="top">
  <div class="inner">

   <div class="nav">top nav</div>
   <select>
    <option>English</option>
    <option>Hebrew</option>
   </select>

  </div>
 </div>
 <div class="bottom">
  <div class="left">left nav</div>
  <div class="content">
   <div class="inner">

    <!-- regular content -->
    <div class="content-left">
     <ul>
      <li>content item</li>
      <li>supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
      <li>content item</li>
     </ul>
    </div>
    <div class="content-right">

     <div class="sideblock">
      side block
     </div>
     <div class="sideblock">
      side block
     </div>
     <div class="sideblock">
      supercalifragilisticexpialidocious
     </div>
     
    </div>
    
   </div>
  </div>
 </div>
</div>

Firefox on the other hand isn't doing this, instead it is just scrolling the whole body element.

Any ideas on how I can fix this for Firefox? Root cause fix preferable, hacks considered but not really desirable.