JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="header">Header with fixed height</div>
        <div id="contactlist">
            <ul>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li><li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>    
        </div>            
    </div>
</body>

CSS

#wrapper { width: 200px;  border: 4px solid black; }
#header { height: 50px; border: 2px solid red; }
#contactlist { overflow: auto; border: 2px solid blue; }

JavaScript

$("#contactlist").css("height",$("#wrapper").outerHeight()-$("#header").outerHeight()-12);