如何设置孩子相对于其弹性成长的父母的身高？

Question

在以下示例中，使用 flex-box 布局，我需要黑框的高度为蓝框高度的 50%。
蓝色框的样式为flex-grow: 1，因此它占据了红色框内的所有剩余空间。

是否甚至可以使用 flex-box 布局来做到这一点？
如果没有，有没有其他纯 CSS 没有表格布局的方法？

* {box-sizing: border-box}
div {padding: 5px; border: 1px solid red ; display: flex }
col1 {border: 1px solid green}
col2 {flex-grow: 1; border: 1px solid blue; padding: 10px; margin-left: 5px}
item {display: inline-block; border: 1px solid black; width: 30% ; height: 50%}

<div>
<col1>
Content
<br><br><br><br><br>
of
<br><br><br><br><br>
this
<br><br><br><br><br>
column
</col1>
<col2>
<item>
Height must be 50% of parent's
</item>
<item>
Height must be 50% of parent's
</item>
<item>
Height must be 50% of parent's
</item>
</col2>
</div>

Answer 1

您可以在 parent 上创建伪元素并在其上使用 flex: 1，这样它会占用一半的高度，另一半会占用 child 元素

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  border: 1px solid black;
  padding: 10px;
}
.parent {
  flex-grow: 1;
  display: flex;
  padding: 10px;
  flex-direction: column;
  border: 1px solid blue;
}
.random {
  padding: 20px;
  margin-right: 20px;
  border: 1px solid green;
}
.parent:after {
  content: '';
  flex: 1;
}
.child {
  flex: 1;
  border: 1px solid red;
}

<div class="content">
  <div class="random">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="parent">
    <div class="child">asd</div>
  </div>
</div>