CSS Stretch content container height if empty overflow if too big [duplicate]

Question

What I have is a simple structure of container followed by two child elements, contentand footer.

footer has a fixed height and content should fill remaining empty space. That is easy enough to achieve with display:table; but for some reason I can't figure out how to make content element overflow to work if its contents exceed website window height?

Here is a JSFiddle, if you set content_child height to say 10pxyou can see content element filling up the space nicely but when content_child is a lot bigger content element shouldn't expand the way it does now, what am i missing here?

I would prefer to not use JavaScript to solve this if possible.

body, html{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.container{
  display:table;
  background; black;
  width: 100%;
  background: black;
  height: 100%;
}
.top{
  background: blue;
  display:table-row;
  height: 100%;
}

.bottom{
  background: red;
  height: 60px;
}

.content{
  height: 100%;
  overflow: hidden;
  padding: 5px;
}

.content_child{
  height: 1000px;
  background: grey;
}

<div class="container">
    <div class="top">
      <div class="content">
          <div class="content_child"></div>
          </div>
      </div>
  </div>
  <div class="bottom">
  </div>
</div>

Answer 1

Flexbox can do that.

body {
 margin:0;
 }

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  background: #bada55;
  overflow-y: auto;
}
.expander {
  height: 1000px;
  /* for demo purposes */
}
footer {
  background: red;
  height: 60px;
}

<div class="container">
  <div class="content">
    <div class="expander"></div>
  </div>
  <footer></footer>
</div>

Answer 2

The only thing you need to do is to change this CSS rule

.content{
  height: 100%;
  overflow: auto;   /* change from hidden to auto */
  padding: 5px;
}

which will make it look/work like this

body, html{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.container{
  display:table;
  background; black;
  width: 100%;
  background: black;
  height: 100%;
}
.top{
  background: blue;
  display:table-row;
  height: 100%;
}

.bottom{
  background: red;
  height: 60px;
}

.content{
  height: 100%;
  overflow: auto;
  padding: 5px;
}

.content_child{
  height: 1000px;
  background: grey;
}

<div class="container">
  <div class="top">
    <div class="content">
      <div class="content_child"></div>
    </div>
  </div>
  <div class="bottom">  
  </div>
</div>