how to deal with grid overflow?

Question

I created a codepen to illustrate the issue I'm facing right now https://codepen.io/marcdaframe/pen/qeBWNd

<div>
 123 abc
  <div class="container">
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
  </div></div>
Hello World
</div>

* {box-sizing: border-box;}
.container{
  height: 25%;
  overflow-y: scroll;
}
.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px 200px;
}

I have a container which has a height defined in percents (it does work with absolute values set, but I am unable to use absolute values or vh) that the grid will be in a div 25% tall and any overflow should scroll, but the grid within the div doesn't respect that.

You need specify some height to its parent. So that it knows what it's supposed to be 25% of. Try assigning `height: 100vh` to its parent (the first div) — Waleed Iqbal, Jul 18 '19 at 01:27

score 1 · Accepted Answer · answered Jul 18 '19 at 07:19

When you are using height:25%, you need to define 25% of what. So effectively for 25% to work, you need to give 100% height to all the parent containers till body and html.

Effectively the extra styles needed for your 25% to work are:

html,body {
   height:100%;
}
body > div {
  height:100%;
}

Note : The above div style is needed for only the parent div of "container" div. Hope it helps you to understand the issue.

score 0 · Answer 2 · answered Jul 18 '19 at 01:44

You can set the overall height to 100%, then the child DIVs as a percentage of the overall height. Note that the first DIV in your pen also had to have a set height. Here's the edited PEN: https://codepen.io/witnauer/pen/LwYPMx

* {box-sizing: border-box;height: 100%}
.outermost {
  height: 25%;
}
.container{
  height:25%;
  overflow-y: scroll;
}
.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px 200px;
}

<div class="outermost">
 123 abc
  <div class="container">
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
  </div></div>
Hello World
</div>

how to deal with grid overflow?

2 Answers2