Çocuğun hizasındaki büyümüş ebeveyne göre yüksekliği nasıl ayarlanır?

Question

Aşağıdaki örnekte, esnek kutu düzenini kullanarak, siyah kutuların yüksekliğinin mavi kutunun yüksekliğinin% 50'si olması gerekir.
Mavi kutu, flex-grow: 1 stiline sahiptir, böylece kırmızı kutunun içinde kalan tüm alanları kaplar.

o esnek kutu düzeni bunu yapmak bile mümkün mü?
Değilse, saf CSS ile başka bir yol var mı ve tablo düzeni yok mu?

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

Sen ebeveyn üzerinde sahte Elment oluşturmak ve onun yüksekliği ve diğer yarısı yarısı sürecektir child elemanını

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

alacak Üzerinde flex: 1 kullanabilirsiniz