Making the second item of flex container sticky with CSS - html

Question

I have flex container that contains two columns.
Each column is a flex container as well.
I wish to make the second item of the side column sticky, so when you scroll down it will stay visible until the end of the page
In my example you can see that I tried with position: sticky;
But it seems like the item gets stick but not all the way to the end of the page.
What am I missing?
I tried some answers like My position: sticky element isn't sticky when using flexbox but I didn’t managed to make it work.
Demo: https://codepen.io/avneri/pen/yLONZVy
.page-container {
display: flex;
justify-content: space-evenly;
}
.column-container {
max-width: 50%;
}
.item-wrapper {
display: flex;
flex-direction: column;
}
.item {
min-width: 150px;
margin: 15px;
padding: 30px;
background: red;
text-align: center;
}
.sticky {
background: green;
position: -webkit-sticky;
position: sticky;
top: 0;
align-self: flex-start;
}
<div class="page-container">
<div class="column-container">
<div class="item-wrapper">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
...
</div>
</div>
<div class="column-container">
<div class="item-wrapper">
<div class="item">
Side item 1
</div>
<div class="item sticky">
Side item 2
</div>
</div>
</div>
</div>

Answer 1

It's because the second column's inner wrapper doesn't extend to the full height; sticky will not let the element pass the limits of its container.
Try adding height: 100%; as below (I did it with a class):
.page-container {
display: flex;
justify-content: space-evenly;
}
.column-container {
max-width: 50%;
}
.item-wrapper {
display: flex;
flex-direction: column;
}
.item {
min-width: 150px;
margin: 15px;
padding: 30px;
background: red;
text-align: center;
}
.sticky {
background: green;
position: -webkit-sticky;
position: sticky;
top: 0;
align-self: flex-start;
}
.full-height {
height: 100%;
}
<div class="page-container">
<div class="column-container">
<div class="item-wrapper">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
...
</div>
</div>
<div class="column-container">
<div class="item-wrapper full-height">
<div class="item">
Side item 1
</div>
<div class="item sticky">
Side item 2
</div>
</div>
</div>
</div>