带固定元素的Flexbox

Question

如果我有一个带有固定子项的flexbox容器，但它似乎没有正确地包装元素：

<div id="parent">
  <div id="child-1"></div>
  <div id="child-2"></div>
</div>

#parent {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
}
#child-1 {
  display: flex;
  flex: 1 0 auto;
  position: fixed;
}
#child-2 {
  display: flex;
  flex: 1 1 auto;
  overflow-y: scroll;
}

Answer 1

将 position：sticky; 和 top：0; 添加到＃child-1，而不是固定的位置；

Answer 2

我已修复此问题：

• 父：

  显示：flex; 弯曲方向：柱; 身高：100％;

• 孩子1：

  显示：flex; flex：1 0 auto; 辩解内容：空间 - 间隔; flex-wrap：wrap;

• 孩子2

  显示：flex; flex-wrap：wrap; flex：1 1 auto; overflow-y：auto;