In my layout, I have a grid parent with two columns. The left child has a height equal to the parent (100vh), while the right child is 1000px tall, which exceeds the parent's height.
Here is the HTML structure:
<body>
<div class="leftcol"></div>
<div class="rightcol"></div>
</body>
And here is the corresponding CSS code:
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
overflow: hidden;
}
.leftcol {
background-color: grey;
height: 100vh;
width: 100%;
}
.rightcol {
background-color: black;
height: 1000px;
width: 100%;
overflow: auto;
}
I aim to make only the right child scrollable, as its height surpasses that of the parent, ensuring the left child remains fixed in place. However, despite setting overflow: auto on the right child, it does not function as expected. Can anyone point out what mistake I might have made? Thank you.