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

Question

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

它甚至可以做到这一点与柔性盒布局？
如果没有，是否有任何其他方式纯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

你可以在父创建伪elment和使用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>