En ce qui concerne le problème selon lequel la définition de la hauteur minimale de l'élément parent et la définition de la hauteur de l'élément enfant à 100% ne prennent pas effet

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

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

Problème : la hauteur de l'élément enfant est toujours égale à 0

Solution

Le premier : position de l'ensemble d'éléments parents : relative, position de l'ensemble d'éléments enfants : absolue

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

La seconde: ajoutez une couche de boîte à l'élément parent et ajoutez une disposition flexible à la boîte

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

Le troisième : ajoutez display: grid à l'élément parent ;  

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

La méthode ci-dessous ne colle pas le code

Le quatrième type : ajouter l'héritage min-height à l'élément enfant,

Le problème avec ceci est que si la hauteur de l'élément parent est supérieure à min-height, l'élément enfant ne deviendra pas automatiquement plus grand

Cinquième : Ajoutez display : flex ; flex-direction : colonne à l'élément parent ; ajoutez flex : auto ; à l'élément enfant

Le problème avec ceci est qu'il ne peut pas être réglé à une hauteur de 50 %.

Sixième : affichage : tableau ;