使用flex-direction: column布局时设置flex:1无法让子元素占满高度

• flex 容器.wrap未设置明确高度：默认块级元素的高度由内部内容总高度决定，flex: 1的作用是分配 flex 容器的剩余可用空间，当.wrap本身没有设置固定高度/百分比高度时，它的总高度刚好等于 c1、c2 的内容默认高度之和，没有多余的剩余空间可以分配，因此 c1 不会拉伸填充。
• 若你期望占满整个浏览器视口高度，还需要确认.wrap的所有祖先元素（包括html、body）是否设置了对应高度：百分比高度依赖父元素的明确高度定义，如果祖先元素没有高度声明，.wrap的百分比高度也无法生效。

如果你需要让 c1 占满视口剩余高度，修改 CSS 代码如下：

/* 给所有祖先元素设置高度，保证百分比规则生效 */
html, body {
  height: 100%;
  margin: 0; /* 清除浏览器默认边距，避免出现多余滚动条 */
}

.wrap {
  display:flex;
  flex-direction: column;
  height: 100%; /* 给 flex 容器设置明确高度 */
}

.c1 {
  background: red;
  flex: 1;
}

.c2 {
  background: blue;
}

你提供的 HTML 代码无需修改，调整后 c1 就会自动占满.wrap中除 c2 高度之外的所有剩余空间。
如果.wrap是放在其他自定义父容器内、不需要占满视口，只需要给.wrap本身设置你需要的固定高度（比如height: 600px），或者给它的直接父元素设置明确高度后给.wrap设置height: 100%即可。

内容的提问来源于stack exchange，提问作者alice_morgan