JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<div class="wrapper-fixed">
    <div class="content">
        <div class="element-fixed">
            <p>I'm fixed in Chrome, FF</p>
            <p>Why not in IE ?</p>
        </div>
        
        <p>Content</p>        
        <p>Content 1</p>        
        <p>Content 2</p>
        <p>Content 3</p>        
        <p>Content 4</p>
        <p>Content 5</p>        
        <p>Content 6</p>
        <p>Content 7</p>   
        <p>.</p>  
        <p>.</p>  
        <p>.</p>  
    </div>
</div>

CSS

.wrapper-fixed{
    position: fixed;
    background-color: #999;
    top:0;
    left: 0;
    right:0;
    bottom:0;
    overflow: auto;
}

.content{
    width: 200px;
    height: 200%;
    margin: 0 auto;
    background-color: #fff;
}

.element-fixed{
    position: fixed;
    width: 170px;
    border-radius: 10px;
    top: 70px;
    margin-left: -180px;
    background-color: #fff;
}

p{    
    text-align: center;
}