如何使用一个固定高度的顶部div创建一个垂直的flexbox，以及一个可以溢出的剩余高度的中间div？

Question

我试图创建一个占据我页面整个高度的弹性框。它内部有2个div：一个带有height: 80px的顶部div和一个底部div，它将占用剩余的空间。问题是：底部div有可能溢出的内容。发生这种情况时，顶部div的高度：80px 将被完全忽略并收缩。我如何保证我的top-div不会因底部div的溢出而缩小？

Here is the demo.

Answer 1

你对flex的使用并不十分有效。试试这个：小提琴 here

CSS

* { margin: 0px; padding: 0px; box-sizing: border-box; }
#page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 600px;
  overflow: hidden;
}
#top {
  background-color: #999;
  flex: 0 1 80px; /* Change 80px if diff needed, it is the basis parameter.     It means that the base height will be 100px before growing or shrinking. */
}
#bottom {
  background-color: #d7d7d7;
  flex:4 0 400px;
  overflow: scroll;
}