JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div>
        <p>I will expand to fill extra space</p>
        
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p> 
        <p>I will expand to fill extra space</p>
        <p>I will expand to fill extra space</p>
        
    </div>
    <div>
        <p>I will not expand</p>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#container {
    height: 100%;
    width: 100%;
    min-height: 0px;
    display: flex;
    /* -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column; */
    flex-direction: column;
}

#container > * {
    border: 1px solid black;
    margin: 0px;
}

#container > *:nth-child(1) {
    flex: 1;
    overflow-y: auto;
}