在Flexbox中设置基于百分比的高度

Question

我想创建一个弹性布局，其中子级可以具有基于百分比的高度，即第一个子级的高度为10%，第二个子级的高度为50%，最后一个40%，但我不知道该怎么做。

下面的box和box2基本相同，只是box的{​​{1}}设置为flex-direction，并且与我的预期不符（就像column一样）

box2

html,
body {
  height: 100%
}

.parent {
  display: flex;
}

.box {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.box2 {
  flex-basis: 50%;
  display: flex;
  background-color: white;
}

.child {
  width: 100%;
  background-color: black;
  margin-bottom: 16px;
}

.row-child {
  height: 100%;
  background-color: black;
  margin-right: 16px;
}

.child1 {
  flex-basis: 10%;
}

.child2 {
  flex-basis: 50%;
}

.child3 {
  flex-basis: 40%;
}

如果运行代码，则在左侧看不到任何渲染，但在右侧则看到了。