親要素のmin-heightの設定と子要素の高さの100%設定が反映されない問題について

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

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

問題:子要素の高さがまだ 0 です

解決

1つ目: 親要素の設定位置: 相対、子要素の設定位置: 絶対

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

2 番目: 親要素にボックスのレイヤーを追加し、ボックスにフレックス レイアウトを追加します

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

3 番目: display:grid を親要素に追加します。  

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

以下の方法ではコードは貼り付けられません

4 番目のタイプ: min-height 継承を子要素に追加します。

これの問題は、親要素の高さが min-height より高い場合、子要素の高さが自動的に高くならないことです。

5 番目: 親要素に display: flex; flex-direction: column を追加し、子要素に flex: auto; を追加します。

これの問題は、高さを 50% に設定できないことです。

6 番目: ディスプレイ: テーブル。