JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top_content">Oranges List</div>
    <div id="remaining_content">
        <ul>
            <li>Oranges</li>
            <li>Oranges</li>
            <li>Oranges</li>
            <li>Oranges</li>
            <li>Oranges</li>
            <li>Oranges</li>
            <li>Oranges</li>
            <li>Oranges</li>
        </ul>
        
    </div>
</div>

CSS

#container {
    color: white;
    height: 200px;
    max-width: 200px;
    border: 5px solid black;
    position: relative;
    display: inline-block;
}
#top_content {
    background-color: blue;
    width: 100%;
    height: 50px;
}
#remaining_content {
    background-color: red;
    width: 100%;
    top: 50px;
    bottom: 0;
    position: absolute;
    overflow: auto;
}
ul {
     margin: 10px;   
}