JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

<div id="holder">
    <div id="inside">
    </div>
    <div id="wrap" >
        <div id="wrapped-inside"></div>
    </div>
    <div id="something-long-to-make-the-holder-scroll"></div>
</div>

CSS

body {
   
}

#holder {
    height: 600px;
    background: #000;
    overflow: scroll;
}

#holder:hover {
    -webkit-transform: translateZ(0);
}

#something-long-to-make-the-holder-scroll {
    display: block;
    height: 1000px;
    width: 10px;
    background: green;
}

#inside, #wrapped-inside  {
    position: fixed;
    top: 100px;
    height: 100px;
    right: 0px; left: 0px;
    background-color: #f00;
}

#wrapped-inside {
    top: 250px;
    background-color: blue;
}

/* Without this DIV, the fixed-positioning-to-the-overflowed-element doesn't work */
#wrap {
    position: relative;
}