JSFiddle - React, Tailwind, and code Playground

by jakub_g

HTML

<div id="outer">
    <div id="inner">
         <div id="notVisible">
            I am not visible in all browsers (this is what I want)
         </div>
         1<br>2<br>3<br>4<br>5<br>
         6<br>7<br>8<br>9<br>10<br>
         11<br>12<br>13<br>14<br>15<br>
         16<br>17<br>18<br>19<br>20<br>
    </div>
</div>

CSS

#outer {
    overflow-y: scroll;
    height: 150px; /*smaller than contents */
    
    background-color: yellow;
    width: 400px;
}

#inner {
    position: relative;
    top: -30px;
    margin-bottom: -30px;

    background-color:red;
}

#notVisible {
    height: 30px; /* due to "top" in #inner I am invisible */
    background-color: lime;
}