html - 如何防止网格 div 的高度随其内容扩展？

Question

所以我有一个带有 4 个 div 的简单网格。div 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: "•&quot;; 
    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 的高度？

先感谢您，

博尔科

标签： htmlcssgridview