JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div id="root">
    <div class="stretch">
        <div id="container" class="container">  
             <div style="left: 0.0%; width:33.25%;" class="pillar" ></div>
             <div style="left: 33.05%; width:33.25%;" class="pillar" ></div>
             <div style="left: 66.05%; width:33.25%;" class="pillar" ></div>     
             <div id="fixed-and-not-movable">
        </div>          
    </div>
</div>

CSS

#root {
    height: 250px;
    position: relative;
}

.stretch {
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: absolute;
}

.container {
    display: flex;
    align-items: stretch;
    border: 2px solid;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    background: yellowgreen;
}

.pillar {
    min-height: 100%;
    border: 1px dotted red;
    flex: 1;
    align-self: stretch;
}

#fixed-and-not-movable{
    background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;
}