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

/* NEW */
    html, body { 
        height: 100%; /* necessary when using percentage heights within body
                         on non-absolutely positioned children (such as .outer)
                         more info: http://stackoverflow.com/a/31728799/3597276 */ 
        overflow: hidden; /* prevent vertical scrollbar on browser window,
                             in conformance with demos posted in question */
    } 
    
    .outer {
        border: 1px solid black;
        height: 50%; /* ADJUSTED */
        /* max-height: 10%; REMOVED */
        overflow-y: scroll;
        width: 300px;
    }
    
    .inner {
        /* height: 10%; REMOVED
        max-height: 10%; REMOVED */
    }
    
    .item {
        background: grey;
        border: 1px solid red;
        height: 50px;
    }