Em relação ao problema de definir a altura mínima do elemento pai e definir a altura do elemento filho para 100% não surte efeito

<div class="container">
    <div class="child"></div>
</div>

<style>
    .container {
        min-height: 100px;
        border: 1px solid;
    }
    .child {
        height: 50%;
        background: red;
    }
</style>

Problema: a altura do elemento filho ainda é 0

Solução

O primeiro: posição do conjunto de elemento pai: relativa, posição do conjunto de elemento filho: absoluta

<div class="container">
    <div class="child"></div>
</div>

<style>
    .container {
        min-height: 100px;
        border: 1px solid;
        position: relative;
    }
    .child {
        width: 100%;
        height: 50%;
        background: red;
        position: absolute;
    }
</style>

A segunda: adicionar uma camada de caixa ao elemento pai e adicionar um layout flexível à caixa

<div class="box">
    <div class="container">
        <div class="child"></div>
    </div>
</div>

<style>
    .box {
        display: flex;
    }
    .container {
        width: 100%;
        min-height: 100px;
        border: 1px solid;
    }
    .child {
        height: 50%;
        background: red;
    }
</style>

A terceira: adicionar display: grid ao elemento pai;  

<div class="container">
   <div class="child"></div>
</div>

<style>
    .container {
        width: 100%;
        display: grid;
        min-height: 100px;
        border: 1px solid;
    }
    .child {
        height: 50%;
        background: red;
    }
</style>

O método abaixo não cola o código

O quarto tipo: adicionar herança de altura mínima ao elemento filho,

O problema com isso é que, se a altura do elemento pai for maior que a altura mínima, o elemento filho não ficará automaticamente mais alto

Quinto: adicione display: flex; flex-direction: column ao elemento pai; adicione flex: auto; ao elemento filho

O problema com isso é que não pode ser definido para uma altura de 50%.

Sexto: display: mesa;