I'm working with a flex container that has two columns, where each column is also a flex container.
My goal is to make the second item in the side column sticky, so it remains visible even when scrolling down the page.
In my attempt, I used position: sticky;, but it doesn't stick all the way to the end of the page. What am I missing?
I've looked at solutions like the one on Stack Overflow, but I haven't been able to get it to work.
Check out the demo here: Demo
.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>