FlexBox具有静态和可滚动元素

Question

我有以下标记：

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
</div>

样式：

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

我想要以下内容：

1. 固定header，即不滚动
2. 将content直接置于header下，即如果header的高度发生变化，则元素之间不应重叠
3. content垂直滚动
4. 作为旁注：header和content都是弹性容器
5. header有多个<a>元素，其中href链接到content上的元素，用于在点击时滚动到所选元素

Answer 1

我已修复此问题：

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#header {
  display: flex;
  flex: 1 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}
#content {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  overflow-y: auto;
}