我一直在尝试用CSS网格创建一个简单的响应网页，但是CSS网格后面的div覆盖了网格的内容，而不是写在下面。
我可以通过增加下面的填充来解决这个问题。但是如果我增加卡片的数量，这个解决方案就失败了。有没有一种方法可以让CSS网格自动根据需要占据尽可能多的高度？
又或许我觉得问题的根源是别的，可能与网格高度完全无关。无论如何，应该怎样做才能停止覆写？
请在此处查看问题：https://jsfiddle.net/9e7Lm6vg/5/
'

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: max-content;
    padding: 2% 10% 2% 10%;
    grid-row-gap: 2%;
    grid-column-gap: 5%;
}

.card{
    border-radius: 10%;
    box-shadow: 0.5rem 0.5rem 0.6rem 0.1rem gray;
    overflow: hidden;
}

.card:hover{
    transform: scale(1.05);
}

.card-body{
    padding: 2% 2% 2% 5%;
}

.card-title{
    font-family: serif;
    font-size: xx-large;
    color: darkred;
    text-align: center;
    padding-bottom: 2%;
}

.card-desc{
    color: black;
    font-family: monospace;

}
.card-img{
    width: 100%;
}

.card-header{
    padding: 2%;
    text-align: center;
    text-transform: uppercase;
    font-family: monospace;
    background-color: darkred;
    color: white;
}

html{
    height: 100%;
}
body{
    height: 100%;
}
#root{
    height: 100%;
}

'

<div id="root">
    <div class="card-container">
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
        <div class="card">
            <div class="card-header">
            Breakfast
            </div>
        <img class="card-img" src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
        <div class="card-body">
            <div class="card-title">
            Poha
            </div>
            <div class="card-desc">
            Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
            </div>
        </div>
        </div>
    </div>
    <h1>This line here writes over the cards. Why?</h1>
</div>

'