CSS grid: nesting grids messes up the HEIGHT

Question

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  /*      display: grid;
           grid-template-columns: 1fr 1fr;
           grid-gap: 10px;
        */
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1/span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2/span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1/span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

I have a piece of SCSS that uses grid to style my page. Please notice the vertical scroll bars.

Now, I want to add one more div on the right side of this table.So I add a div after this div and I add display:grid to the container of these two divs. As a result, those scroll bars go away because the HEIGHT of their divs is messed up.

Please uncomment lines 9-11 from SCSS.

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

What is going on there?

Nothing, because the scrollbar appears according to the actual height of the element. So it is normal that they have disappear. — Patrissol Kenfack, Mar 20 '20 at 02:26
Just add `min-height: 0` to `.grid-container-1`. https://jsfiddle.net/3n2prsqc/ — Michael Benjamin, Mar 20 '20 at 15:14

score 3 · Accepted Answer · answered Mar 20 '20 at 02:44

That behavior probably have related calculation result of auto keyword in implicitly-created grid row.

auto^ref

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

For example, when grid-auto-rows (or grid-template-rows) property is set to 100%, it looks like below and problem is solved:

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100%;
}

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100%;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1/span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2/span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1/span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

That works, thank you! So if I understand it correctly, the outer grid where i specified only the columns has (of course) a row and that is "auto" since it wasn't specified. — Nicolae Daian, Mar 20 '20 at 15:36

score 1 · Answer 2 · answered Mar 20 '20 at 02:47

turned your SCSS into CSS.

The "problem" is that your grid has no constraint regarding the height, so it will render as high as it needs. You'll see that if you disable overflow: hidden;

So just adding: grid-template-rows: 100%; the grid will adhere to the height of the div and not overflow.

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  grid-gap: 10px;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2 / span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1 / span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

Thank you Thomas, that works! I accepted Sanriot's answer since that was the first answer. — Nicolae Daian, Mar 20 '20 at 15:47

CSS grid: nesting grids messes up the HEIGHT

2 Answers2