html - 网格项没有完全占据网格容器

Question

我已经创建了一个网站设计，一切正常，只是我在让网格元素占据所有可用空间时遇到问题。

我已经在 codepen 中添加了站点 here.

.container{
    border-radius: 8px;
    width:90%;
    height: 90vh;
    margin: 0 auto;
    background: #ecf0f1;

    display: flex;
    flex-direction: column;
}

main{
    display: grid;
    grid-template-columns: 300px 1fr;
    flex-grow: 1;
}

.data-box{
    padding-top:1rem; 
    background: #e74c3c;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3rem 2.5rem 2.5rem auto;
    justify-items: center;
    align-items: center;

}

.display-box{
    padding: 2em;
    background: #2c3e50;

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(6em,1fr));
    grid-gap:1.5rem;
    align-items: center;
    justify-items: center;
}

HTML:

 <div class="container">
        <div class="main-text">
            <h1>Smart Parking System UI</h1>
            <p>Currently viewing: <span class="lot-id">Beta</span></p>
        </div>
        <main>
            <div class="data-box">
                <p class="m-para">Parking Status</p>
                <p class="total-para">Total Seats:</p><span class="total-data">15</span>
                <p class="avail-para">Available: </p><span class="avail-data">12</span>
                <div class="location">
                        <p>Your Location:</p><i class="fas fa-map-marker-alt"></i><p>Asgard</p>
                </div>
            </div>
            <div class="display-box">
                <div class="lot-box inactive">1</div>
                <div class="lot-box">2</div>
                <div class="lot-box">3</div>
                <div class="lot-box">4</div>
                <div class="lot-box">5</div>
                <div class="lot-box">6</div>
                <div class="lot-box">7</div>
                <div class="lot-box">8</div>
                <div class="lot-box">9</div>
                <div class="lot-box inactive">10</div>
                <div class="lot-box inactive">11</div>
                <div class="lot-box">12</div>
                <div class="lot-box">13</div>
                <div class="lot-box">14</div>
                <div class="lot-box">15</div>

            </div>
        </main>
    </div>

在整个页面 View 中可以注意到该问题。容器 div 是一个 flexbox，包含 flex-grow 0 的 main-text div 和 flex-grow 1 的 main 标签。 main 标签是一个网格容器，有两个网格项显示框和数据框。我很难让它们占据主标签中的所有可用空间，如白色空白所示。

Answer 1

main 元素实际上拉伸(stretch)了容器的整个高度。换句话说，flex-grow: 1 正在工作。 (您可能已经知道这一点。)子元素(data-box 和 display-box)没有拉伸(stretch)父元素的整个高度，因为它们根本没有其中的内容还不够。

您还将 data-box 设置为:

grid-template-rows: 3rem 2.5rem 2.5rem auto;

这会创建四行定义的或基于内容的高度。使用 fr 单位覆盖可用空间。

grid-template-rows: 3fr 2fr 1fr auto;

revised codepen