JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div>
</div>

CSS

html, body {height: 100%}
.outer {
    border: 1px solid black;
    height: 30%;
    max-height: 30%;
    overflow-y: scroll;
    width: 300px;
}

.inner {
    height: 10%;
    max-height: 10%;
}

.item {
    background: grey;
    border: 1px solid red;
    height: 50px;
}