Sticky element is not working in Flex box

Question

I've made a code with flex box and sticky. I want blue div to be sticky and red div to be long and scrollable Also, wrapper around red and blue div is centered.

However, blue div moves as I scrolled.

.wrap {
    display: flex;
    overflow: auto;
    align-items: flex-start;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.left {
    margin: 0;
    background: red;
    width: 100px;
}

.right {
    margin: 0;
    background: blue;
    width: 100px;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}

<div class="wrap">
    <div class="left">
        Hello<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
    <div class="right">
        World
    </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

JsFiddle link

remove the overflow:auto – Temani Afif Aug 15 '20 at 08:30 — Temani Afif, Aug 15 '20 at 08:30

score -1 · Answer 1 · answered Aug 15 '20 at 03:35

the issue is the wraper div doesn't have max-height or height that is less than the left red div, if you did add a height to the wrapper you will get what you want successfully.

and check this question my-position-sticky-element-isnt-sticky-when-using-flexbox which has similar issue(but not an exact duplicate) of your question.

Sticky element is not working in Flex box

1 Answers1