将 100vh 保留在网格容器溢出中的问题

Question

我正在尝试实现一种没有滚动页面的仪表板。我有一个网格布局，其中一些部分的高度为 100vh。问题是，在这些部分中，我希望 child div 在它们大于 parent 容器的 100% 时溢出，但它们正在扩展其内容而不是溢出。

这里是 HTML:

<div class="page-holder w-100 p-5">
    <div class="grid-container">
        <section class="item1">
            <div class="card">
                <div class="card-header">Section</div>
                <div class="card-body">
                    <p>Here some content fixed</p>
                    <p>Below the overflow content with max-height 100%</p>
                    <div class="content-overflow">
                        <div class="row">
                            <div class="col-md-12">
                                <p>Row</p>
                            </div>
                        </div>
                        ....
                    </div>
                </div>
            </div>
        </section>
        <section class="item2">
            <div class="card">
                <div class="card-header">Section</div>
                <div class="card-body">
                    <div class="content-overflow">
                        <div class="row">
                            <div class="col-md-12">
                                <p>Row</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p>Row</p>
                            </div>
                        </div>
                        ...
                    </div>
                </div>
            </div>
        </section>
        <section class="item3">
            <div class="card">
                <div class="card-header">Section</div>
                <div class="card-body">
                    <div class="content-overflow">Empty Content</div>
                </div>
            </div>
        </section>
    </div>

这里是 CSS:

.page-holder {
  height: calc(100vh - 40px);
  ...
}

.grid-container {
  display: grid;
  ...
  height: 100%;
}

section, section > .card {
  height: 100%;
}

.content-overflow {
  overflow-y: auto;
  heigth: 100%; /* Not working - it only overflows if I set height on px */
  background: blue;
  color: white;
}

完整代码见下面CodePen.

Answer 1

我不确定你想要达到什么目的，但也许这会奏效：

.content-overflow {
 overflow-y: auto;
 height: 100vh;
 background: blue;
 color: white;
}

或者你可以max-height:

.content-overflow {
 overflow-y: auto;
 max-height: 100vh;
 background: blue;
 color: white;
}

我还建议用 overflow-x: hidden

去除 x 溢出

Answer 2

你应该给你的卡体overflow:autoclass

Answer 3

我解决了将以下内容添加到网格容器中的问题：

 grid-template-rows: 1fr 1fr;
 grid-template-columns: 1fr 1fr;

将 100vh 保留在网格容器溢出中的问题

Issues keeping 100vh inside grid container overflow

css

height

overflow

css-grid