Position sticky not taking effect [duplicate] - html

Question

This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 3 years ago.
I have added this code to my website but there is no effect:
.wp-block-column:not(:first-child) {
position: sticky;
top: 0px;
}
Here I share a fiddle to demonstrate: https://jsfiddle.net/9xb0q8fw/1/
Screen must be at least 790px wide.
I would like that the right column stays sticky until the left column has passed while scrolling down.
But position:sticky; is not taking effekt.
Thank you for any help!

Answer 1

The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/

Answer 2

position: sticky only works when the parent element around it has a larger height, and when it reaches the end of that element it "bottoms out". So if the wrapping parent element is the same height as the sticky element, it never gets a chance to become sticky. See this demo for a working example of what I mean.
.container {
height: 900px;
}
.content-half {
float: left;
width: 50%;
background: #EEE;
}
.i-am-sticky {
position: sticky;
top: 0px;
padding: 10px;
margin: 10px;
border: 1px solid blue;
background-color: #333;
color: #FFF;
}
<div class="container">
<div class="content-half">
<div class="i-am-sticky">Sticky - not working b/c parent is too short</div>
</div>
<div class="content-half" style="height: 500px;">
<div class="i-am-sticky">Sticky - works b/c parent has height!</div>
</div>
</div>