如何相对于其弹性父级设置子元素的高度？

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>

- GetFree

Answer 1

您可以在父元素上创建伪元素，并在其上使用flex: 1，这样它将占据其高度的一半，另一半将由子元素占据。

* {
  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>

- Nenad Vracar

---

你将外部盒子的高度设置为 100vh。我需要高度是动态的。 - GetFree

我忘记提到一个小细节了。蓝色的盒子里应该有几个黑盒子。我更新了问题。 - GetFree

@NenadVracar，黑盒子应该像内联块一样水平流动。 - GetFree