Grid layout with only one column that scrolls

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

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>