使 flexbox 中间部分滚动，容器不会占用 100% 的页面

Question

让 flexbox 孩子拥有一个滚动条而不是增长，需要一个具有固定高度的容器。易于在隔离环境中创建：

 #container {
  height: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
}

#list {
  display: flex;
  flex-flow: column;
  overflow: auto;
}

https://jsfiddle.net/1yjk5ojp/

但假设我想使用页眉。我不知道它的确切大小，所以我不能对合并使用绝对位置。我也不能在此过程中使用任何 flex 组件，因为它必须是固定大小的。

例如 - 添加了一个 100px 的标题

<div style="height: 100px;">
  <h1>Page header</h1>
</div>

https://jsfiddle.net/z6dsq822/1/

在未知大小的组件之后，我可以做些什么来制作固定高度的组件？

我的限制是我不想要另一个滚动条，并且我希望标题位于此结构之外（这是一个具有不同视图的大型应用程序，标题位于模板中）

Answer 1

为所有内容创建父容器 aflex column并设置#container为flex-grow: 1使其占用可用空间，然后其他所有内容都可以像您已经拥有的那样工作。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  flex: 0 0 100px;
}

#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}

#list {
  display: flex;
  overflow: scroll;
  flex-direction: column;
  flex-grow: 1;
}

#top {
  flex: 0 0 20px;
  background-color: #db9277;
}

#bottom {
  flex: 0 0 20px;
  background-color: #db9277;
}

.row {
  height: 100px;
  background-color: #85d8d5;
}

<header>
  header
</header>
<div id="container">
  <div id="top"></div>
  <div id="list">
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="bottom"></div>
</div>