overflow-y: scroll not working in Firefox and Edge

Question

I'm working on a website where I have a huge content, that I want to be scrollable. However, my code only works in Chrome and not in Firefox or Edge.

It seems to work when I set a fixed height for the #content like height: 200px;. But I want the content to always fill the rest of the screen height. The height of the header can change when I have a smaller screen, so CSS calc wouldn't work out I think.

I could use javascript to calculate the height every time the screen size changes, but I would prefer a more elegant way without js. (If there is one)

html, body {
  height: 100%;
}

body {
  margin: 0px;
}

#container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

#header {
  background-color: blue;
  min-height: 50px;
  height: 50px;
}

#content-container {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
}

#nav {
  background-color: red;
  width: 150px;
  min-width: 150px;
}

#content {
  font-size: 15px;
  padding: 25px;
  overflow-y: scroll;
}

<div id="container">
  <div id="header"></div>
  <div id="content-container">
    <div id="nav"></div>
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut dui id mauris pharetra auctor eu sit amet ante. Nunc sodales
    nisl quis purus lacinia fringilla. Mauris mollis sit amet metus et volutpat. Cras non ante lectus. Vestibulum ullamcorper
    ligula at iaculis pellentesque. Fusce nec fringilla libero, sed maximus eros. Sed aliquam semper augue, ac vulputate
    neque lobortis eget. Cras pulvinar, tortor non auctor lobortis, nulla dui semper augue, ut dictum massa magna vel urna.
    Mauris fringilla iaculis mattis. Mauris at mauris sed mauris fringilla rhoncus. Mauris vestibulum arcu eu lectus pellentesque
    facilisis. Nulla auctor nibh ac neque tincidunt rutrum. Vestibulum dapibus elit ex. Praesent id neque quis felis sodales
    elementum. Quisque condimentum pellentesque finibus. Morbi ut dictum est, vel iaculis lectus. Vivamus sed nunc scelerisque,
    mattis velit id, euismod odio. Suspendisse potenti. Suspendisse eros ante, eleifend ut dictum vitae, posuere sit amet
    turpis. Suspendisse congue vestibulum nulla a tincidunt. Nulla facilisi. Nullam vel leo neque. Suspendisse potenti. Curabitur
    vulputate vestibulum turpis, vitae rhoncus ante gravida sed. Sed vitae efficitur eros, consectetur ullamcorper nisl.
    Nunc turpis massa, dapibus ac elit eget, rutrum tincidunt nisi. Proin nec metus id metus ornare sollicitudin. Integer
    turpis purus, aliquam non est at, ultricies facilisis eros. Integer luctus nisl est, eget laoreet quam commodo ut. Proin
    in enim volutpat, viverra nunc non, elementum est. Integer eu placerat nisl. Nullam posuere maximus metus, ut blandit
    tellus. Vestibulum tristique luctus massa, eget mollis augue lobortis a. Curabitur fermentum id enim ac vestibulum. Praesent
    commodo orci cursus lobortis sodales. Nam pellentesque vulputate enim, eu porttitor libero dignissim in. Fusce ligula
    odio, facilisis sit amet mollis eget, tempor et erat. Quisque sit amet arcu mi. Duis sed tortor ex. Nunc elementum neque
    ex, in luctus sem egestas sed. Etiam quis lorem tincidunt, commodo lacus non, cursus tellus. Maecenas a bibendum ex.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ut ullamcorper felis.</div>
  </div>
</div>

Here's also a codepen

Answer 1

update like

#content-container {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    overflow-y: hidden;
}

Here is the demo

Answer 2

Could you please use max-height instead of height

Answer 3

update Like

#content-container {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  height:100%
}

Answer 4

This is a known issue in Firefox, see Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable

https://github.com/philipwalton/flexbugs/issues/108