Sticky grid column when scrolling up and down - html

Question

I have a grid layout with two columns. These columns will be different heights and have a height greater than the viewport. This means that if column 1 has a height greater than column 2, then when we scroll down, we will see some whitespace in column 2. In this case, I am trying to make column2 sticky so that there is no wasted whitespace when scrolling.
When scrolling down: When the bottom of the content in column 2 is reached before column 1, column 2 should stick until the bottom of column 1 is reached.
When scrolling up: When the top of column 2 is reached before column 1, column 2 should stick until the top of the other is reached.
I can get the scrolling down to work but once we've reached the bottom and start scrolling up, column 2 will stay stuck to the bottom. It should start scrolling up.
.grid {
display: grid;
grid-template-columns: 200px 200px;
}
.content1 {
height: 2000px;
background: linear-gradient(red, blue);
}
.content2Container {
display: flex;
flex-direction: column;
}
.content2 {
height: 1000px;
border: solid 2px blue;
position: sticky;
bottom: 0px;
}
.flex {
display: flex;
flex-grow: 1;
}
<div class="grid">
<div class="content1"></div>
<div class="content2Container">
<div class="flex"></div>
<div class="content2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut varius enim, commodo vehicula diam. Ut sagittis eu dolor ac tristique. Ut porta interdum magna non semper. Mauris a consequat quam, in rutrum diam. In felis enim, condimentum in ullamcorper
ut, aliquam sed velit. Nunc pretium ante vel massa vestibulum vulputate. Pellentesque ex mauris, lacinia in ligula at, pellentesque tempor est. Nam efficitur nunc erat, ut ultrices diam euismod ege Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Quisque ut varius enim, commodo vehicula diam. Ut sagittis eu dolor ac tristique. Ut porta interdum magna non semper. Mauris a consequat quam, in rutrum diam. In felis enim, condimentum in ullamcorper ut, aliquam sed velit. Nunc pretium ante
vel massa vestibulum vulputate. Pellentesque ex mauris, lacinia in ligula at, pellentesque tempor est. Nam efficitur nunc erat, ut ultrices diam euismod ege Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut varius enim, commodo
vehicula diam. Ut sagittis eu dolor ac tristique. Ut porta interdum magna non semper. Mauris a consequat quam, in rutrum diam. In felis enim, condimentum in ullamcorper ut, aliquam sed velit. Nunc pretium ante vel massa vestibulum vulputate. Pellentesque
ex mauris, lacinia in ligula at, pellentesque tempor est. Nam efficitur nunc erat, ut ultrices diam euismod ege
</div>
</div>
</div>
dummy code to stop jsfiddle warning
Here is my jsfiddle https://jsfiddle.net/mattyBraps/mwa0cv2g/35/