Grid layout with only one column that scrolls - html

Question

I want to create a layout where the left section stays in the same place and only the right side can be scrolled. But when I use position: fixed; the left section becomes full width and height of the viewport.
.container {
position: relative;
margin: 0;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: 40% 60%;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
}
.right {
height: 200vh;
background-color: blue;
}
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

Answer 1

I created a right content, this make a overflow in right parent div.
*{
margin: 0;
padding: 0;
}
.container {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 40% 60%;
}
.left {
/*position: fixed;
top: 0;
left: 0;*/
/* height: 100%;
width: 100%;*/
background-color: red;
}
.right {
overflow-y: scroll;
height: 100vh;
background-color: blue;
}
.right_content{
height: 200vh
}
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
<div class="right_content">RIGHT</div>
</div>
</div>

Answer 2

I played with it.
If you set your positions on the right and left classes to "inline" then the boxes will just be put in the container div following each other as you want them to. With fixed it will put it at 0,0 as you specifid but I think outside the workflow and your second div is inheriting from its parent div and using position relative so it also is at 0,0 (it has no position statement.
Also change your left height to "100vh". At 100% since the right one is at "200vh" it stretches out to be 200vh also.
so your code will look like this
#container {
display: grid;
position: relative;
margin: 0;
padding: 0;
width: 100%;
grid-template-columns: 40% 60%;
}
#left {
position: inline;
height: 100vh;
background-color: red;
}
#right {
position: inline;
height: 200vh;
background-color: blue;
}

Answer 3

There is an easy way to achieve what you want using flex-box. The only thing that you have to do is to wrap your content of the right side into an element with a defined height and the css style overflow-y: scroll;
body {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
}
.left {
height: 100%;
width: 40%;
background-color: red;
}
.right {
height: 100%;
overflow-y: scroll;
width: 60%;
background-color: blue;
}
.right-content {
height: 200vh;
}
<div class="container">
<div class="left">
left content
</div>
<div class="right">
<div class="right-content">
right content
</div>
</div>
</div>