JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w">
        <div class="sidebar">
            <ul>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
                <li>text item</li>
            </ul>
        </div><div class="sidebar_after_wrap">


        <div class="sidebar_after">

            1
            1
            1
1
            <button>ffooooo</button>
            <button>ffooooo</button>
            <button>ffooooo</button>
        </div></div>
    </div>

CSS

* {
            margin:0;
            padding:0;
        }
        .w {
            height: 310px;
            background-color: #EBACCA;
            position: relative;
            overflow: hidden;
            width: 300px;
        }
        .sidebar {
            padding-bottom: 150px;
            overflow: auto;
            max-height: 100%;
            min-height: 100px;
}
.sidebar_after_wrap {position:relative;border:1px solid #f00;
height:10px;
}

        .sidebar_after {
            position: absolute;
            top:-150px;
        }