CSS 拉伸内容容器高度，如果为空则溢出，如果太大

Question

我所拥有的是一个简单的结构，container后跟两个子元素content和footer。

footer具有固定的高度并content应填充剩余的空白空间。这很容易实现，display:table;但由于某种原因，我无法弄清楚content如果元素内容超出网站窗口高度，如何使元素溢出起作用？

这是一个JSFiddle，如果您设置content_child高度来表示10px您可以看到content元素很好地填充空间，但是当content_child更大的content元素不应该像现在这样扩展时，我在这里缺少什么？

如果可能的话，我宁愿不使用 JavaScript 来解决这个问题。

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 可以做到这一点。

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>