Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller one's content finishes. Using position:sticky; top:0; delays scrolling for the lower column. Adding position:sticky; bottom:0; doesn't produce any change. Is it possible to achieve the effect shown in the image? (green frame represents the viewport)
Perhaps some JavaScript is needed?
Here's a code snippet for testing: https://codepen.io/jacek360/pen/XWgNmEB
.cont {
position:relative;
border:5px solid grey;
}
.column-inside {
position:sticky;
bottom:0px;
border:5px solid #000;
}
.grid {
display: grid;
grid-gap:20px;
grid-template-columns: 1fr 1fr;
grid-template-areas: " . . ";
position:relative;
width:300px;
margin:0 auto;
}
.column1 {
background:red;
}
.column2 {
background:blue;
}
// Content here for column 1
// Content here for column 2
https://i.stack.imgur.com/vZ7No.jpg