JSFiddle - React, Tailwind, and code Playground
HTML
<div id="list">
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child<br />
sometimes i span over several lines
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child<br />
sometimes i span over several lines
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child<br />
sometimes i span over several lines
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child<br />
sometimes i span over several lines
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child<br />
sometimes i span over several lines
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
i am a lonely child
</div>
<div class="child">
...
CSS
#list {
width: 500px;
height: 300px;
border: 1px solid blue;
overflow: auto;
overflow-x: hidden;
padding: 10px;
}
.child {
background: #ccc;
padding: 1px 5px;
margin: 1px 0;
}