如何防止网格div随着内容的高度而扩大？

Question

所以我有一个包含 4 个 div 的简单网格。 Divs 2,3 和 4 包含图表，div 1 保留用于某些文本。 当向 div 1 添加更多文本时，它会自动扩展高度以容纳文本。这也会触发其他 div 在 y 方向上拉伸，并且它们“掉落”出包装 div。我尝试添加溢出：自动；到 div 1，但它只是扩展以容纳内容。 我也尝试过 min-width = 0;最小高度 = 0；为了强制网格项不展开但不起作用。

这是代码...

<div id="Progress" class="tabcontent">
                        <div class="progress-content">
                            <div class="progress-content-box first-box">
                                <div class="box-title">
                                    <h2>Summary</h2>
                                </div>
                                <div class="summary">
                                    Progress summary will take data from "1", "2" and "3" cards and provide information in form of bar, pie, doughnut, polar charts!
                                </div>
                                <div class="box-content">
                                    <ul>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                        <li class="progress-li">just some text</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="progress-content-box second-box">
                                <div class="chart-container" style="width: 100%; height: 100%;">
                                    <canvas id="myChart"></canvas>
                                </div>
                            </div>
                            <div class="progress-content-box third-box">
                                <div class="chart-container" style="width: 100%; height: 100%;">
                                    <canvas id="myChart5"></canvas>
                                </div>
                            </div>
                            <div class="progress-content-box fourth-box">
                                <div class="box-charts" style="height: 100%; width: 100%;">
                                    <canvas id="myChart1"></canvas>
                                </div>
                                <div class="box-charts" style="height: 100%; width: 100%;">
                                    <canvas id="myChart2"></canvas>
                                </div>
                                <div class="box-charts" style="height: 100%; width: 100%;">
                                    <canvas id="myChart3"></canvas>
                                </div>
                                <div class="box-charts" style="height: 100%; width: 100%;">
                                    <canvas id="myChart4"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>



.tabcontent{
    display: none;
    border-top: none;
    grid-row: 3/21;
    grid-template-columns: 1fr;
    height: 100%;
    width: 100%;
}
.progress-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 1rem;
    max-height: 100%;
}
.progress-content-box {
    background: #eee;
    box-shadow: 0px 0px 10px 1px #708090;
    padding: 1rem;
    min-width: 0;
    min-height: 0;
}
.first-box {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-gap: 1rem;
    
}
.box-content {
    padding-left: 1rem;
    min-height: 0;
    overflow: hidden;
}
.box-content ul {
    list-style: none;
}
li{
    font-size: 14px;
}
li::before {
    content: "•"; 
    padding-right: 8px;
    color: #708090; 
}
.fourth-box {
    padding: 1rem;
    grid-column: 1/5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
}

类 tabcontent 有 dispay=none;我正在使用 js 在单击选项卡时将显示更改为网格... 所以问题是，当内容太大而无法容纳并提供垂直滚动条时，如何保留 div 的高度？

提前谢谢您，

博尔科

Answer 1

您可以将其他 div 的高度设置为：

height: fit-content