Wie legt man die Größe eines Kindes relativ zu seinem Elternteil fest?

Question

Im folgenden Beispiel, bei dem Flex-Box-Layout verwendet wird, muss die Höhe der Blackboxes 50% der Höhe der Blue Box betragen.
Die blaue Box hat den Stil flex-grow: 1, so dass sie den gesamten verbleibenden Platz innerhalb der roten Box einnimmt.

Ist dies auch mit dem Flex-Box-Layout möglich?
Wenn nicht, gibt es einen anderen Weg mit reinem CSS und ohne Tabellenlayouts?

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

Sie könnten pseudo elment auf Eltern und verwenden flex: 1 auf es schaffen, so dass es die Hälfte seiner Höhe und andere Hälfte nehmen wird child Element

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

nehmen