Родительский div как минимальная высота, создайте высоту ребенка как родителя

Question

поэтому у меня есть 2 divs, из которых один из них выполнен с минимальной высотой, а второй, внутри первого, вот-вот получит высоту своего родителя, но это не то, что на самом деле происходит, так как высота без мин работает, но мне нужно мин с ней.
так это код, который я сделал:

<div style="background:red; width:100px; min-height:calc(100% - 50px);position:absolute;"> 
<div style="background:yellow; width:100px; height:100%;">Yellow</div> 
</div> 

и это не работает, как это должно быть (желтый блок должен быть 100% от родителей). Кроме того, я не хочу, чтобы желтый был абсолютным, потому что я хочу, чтобы его рост повлиял на его родителя.

Answer 1

Поскольку ребенок должен быть того же размера, что и родительский, вы можете позиционировать его абсолютно.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.red { 
 
    background: red; 
 
    min-height: calc(100% - 50px); 
 
    position: absolute; 
 
    width: 100px; 
 
} 
 
.yellow { 
 
    background: yellow; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: absolute; 
 
}

<div class="red"> 
 
    <div class="yellow">Yellow</div> 
 
</div>