grid layout 2 columns with vertical sizes independent of one another

Question

I have created this jsFiddle to show the issue.

Code below :

HTML :

<div id="container">
  <div id="left-col">
    LEFT
  </div>
  <div id="right-col1">
    RIGHT1
  </div>
  <div id="right-col2">
    RIGHT2
  </div>
  <div id="right-col3">
    RIGHT3
  </div>
</div>

CSS:

#container {
  display: grid;
  grid-template-columns: 15% 1fr;
  grid-template-areas:
  "left_area right_area1"
  "left_area right_area2"
  "left_area right_area3";
}

#left-col {
  grid-area: left_area;
}

#right-col1 {
  grid-area: right_area1;
}

#right-col2 {
  grid-area: right_area2;
}

#right-col3 {
  grid-area: right_area3;
}

When I have big vertical content on the left column, it automatically stretches the right one and my content in the right column does not show as I wanted it to.

My goal is for the right column to be the driver of the vertical size of both columns if they cannot be unlinked.

Is there a way to either:

• make the vertical sizes of the grid independent (seems unlikely or it wouldn't be a grid anymore) ?
• authorize overflow on the left column so that the size of the right one takes precedence ?

Any other help appreciated of course.

Answer 1

It's because your container div grow according to the larger div inside.

If you want the right column independent to the left one, you have to create 2 container div :

<div id="container-left">
 <!-- Your left content -->
</div>
<div id="container-right">
 <!-- Your right content -->
</div>