CODEWITHSUNDEEP
htmlcsscss-grid
vuetsexpress
vuetsexpress

Reputation: 5

How can I prevent overflow of nested grid's content of div?

MCVE

I would like to nest a grid within another grid, and have a tall content box within the nested grid's content div. However no matter I set the overflow property of this content div to scroll, the content box grows causing the outer grid to exceed the viewport. So the viewport gets a scrollbar. The scrollbar of the content div is present but disabled.

// html
<div class="outergrid">
  <div class="row1">
  Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
    Inner Grid Header
    </div>
    <div class="box">
    Tall Box
    </div>
  </div>
</div>

// style scss
*{
  padding: 0px;
  margin: 0px;
}

.outergrid {
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 10px;
  background-color: #0ff;
  div {
    background-color: #afa;
  }
}
.row1{
  grid-row: 1;
}
.row2{
  grid-row: 2;
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 5px;
  .header {
    grid-row: 1;
    background-color: #ffa;
  }
  .contentbox {
     grid-row: 2;
     overflow: scroll;
     .tallcontent {
       background-color: #89f;
       height: 1000px;
     }
  }
}

screenshot highlighting the problem

screenshot highlighting the problem

Upvotes: 0

Views: 509

Answers (1)

Oleg Barabanov
Oleg Barabanov

Reputation: 2764

If I understood you correctly, then perhaps this solution (pure CSS, without SCSS) below can help you. The solution is to enforce a constraint on the height of the parent elements.

* {
  padding: 0px;
  margin: 0px;
}

.outergrid {
  --grid-gap: 10px;
  display: grid;
  grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
  grid-gap: var(--grid-gap);
  background-color: #0ff;
  max-height: 100vh;
}

.outergrid div {
  background-color: #afa;
}

.row1 {
  grid-row: 1;
}

.row2 {
  --grid-gap: 5px;
  grid-row: 2;
  display: grid;
  max-height: 100%;
  grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
  grid-gap: var(--grid-gap);
}

.row2 .header {
  grid-row: 1;
  background-color: #ffa;
}

.row2 .contentbox {
  grid-row: 2;
  overflow: scroll;
}

.row2 .contentbox .tallcontent {
  background-color: #89f;
  height: 1000px;
}
<div class="outergrid">
  <div class="row1">
    Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
      Inner Grid Header
    </div>
    <div class="contentbox">
      <div class="tallcontent">
        Tall Content
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions