Issues keeping 100vh inside grid container overflow

user_5578053 0
Viewed 507

I'm trying to implement a kind of dashboard with no scrolling page. I have a grid layout with some sections at 100vh height. The problem is that inside those sections, I want a child div to overflow when they are bigger than 100% of the parent container, but they are expanding its content instead of overflowing.

enter image description here

Here is the 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>

And here is the 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;
}

You can see the full code in the following CodePen.

css-grid overflow height css
3 Answers

I solved adding the following to the grid container:

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

I'm not sure what you are trying to achieve, but maybe this will work:

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

Or you can do max-height:

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

I also suggest taking out x overflow with overflow-x: hidden

Admin1

you should give overflow:auto to your card-body class

user_149835110
Related