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

body {
      display: flex; 
      flex-direction: column; 
      min-height: 100%; 
      margin:0px;
    }
    .wrapper {
      display: block; 
      flex: 1 1 auto; 
      display: flex;
      flex-direction: row; /
    }

    #chatContainer {
    	background: orange;
    	width: calc(100% - 350px);
    	display: flex;
    	flex-direction: column;
    }
    #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;
    }