JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="chatContainer">
        <div id="webcamContainer">webcam</div>
        <div id="tabs">tabs here</div>
        <div id="footer" style="background-color:#A0C8FF;height:50px">footer</div>
    </div>
    <div id="usersContainer" style="background-color:blue">

        <div class="input">searchInput1</div>
        <div class="input">searchInput2</div>

        <div id="userList">
            user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br> user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br> user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br> user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>user1
            <br>user2
            <br>
        </div>

    </div>
</div>

CSS

html { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0px;
}

.wrapper {
    display: block;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    height: 100%;
}

#chatContainer {
    background: orange;
    width: calc(100% - 350px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

#tabs {
    background-color: red;
    flex: 1 1 0px;
    display: flex;
}

#usersContainer {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

#userListWrapper {
    background-color: pink;
    flex: 1 1 auto;
    display: flex;
}

#userList {
    -webkit-flex: 1 1 auto;
    overflow: auto;
    min-height: 0px;
    height: 100%;
}

.input {
    background-color: #49FFFC;
}