flex 1 0 0与flex 4 0 0在flex-flow:column下未按1:4比例分配空间问题

你的代码里flex容器.wrap没有设置高度，默认状态下它的高度仅由内部子元素的内容撑开，这就导致flex: 1 0 0和flex: 4 0 0的比例规则无法生效——因为没有多余的垂直空间可供分配。

解决方法很简单：给flex容器设置明确的高度，同时确保它的父级元素（比如html和body）也有高度，避免百分比高度失效：

/* 先给根元素和body设置高度，确保容器能继承到可用空间 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  flex-flow: column;
  /* 设置容器高度为100%，占满父元素空间 */
  height: 100%;
}

.one {
  background: yellow;
  flex: 1 0 0;
}

.four {
  background: red;
  flex: 4 0 0;
}

<div class="wrap">
  <div class="one">One</div>
  <div class="four">Four</div>
</div>

这样修改后，.wrap会占满整个视口高度，子元素就能按照1:4的比例分配垂直空间了。如果不需要占满整个视口，也可以给.wrap设置固定高度（比如height: 500px），同样能让比例规则生效。

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