Javascript CSS&；jQuery调整大小问题

我正在尝试创建一个可调整大小的聊天室。 我几乎做到了，除了当我调整底部部分的大小时，我无法将userList设置为固定大小，这不会受到调整大小的影响

HTML:

  <div id="chatWindow">
    <div id="dragBar"></div>
    <div id="container">
      <div class="content">
      <p>aici vine niste text</p></div>
      <div class="content">
      <p>aici vine niste text</p></div>
    </div>

    <div id="usersList">
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
    </div>


  <div id="inputTxt"></div>

  </div>

body{
    background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:88%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
 float:left;
  width:75%;
  height:88%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0px;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

$(function() {
  $( "#chatWindow" ).resizable({
    alsoResize: '#dragBar',

   });
    });

JS:

  <div id="chatWindow">
    <div id="dragBar"></div>
    <div id="container">
      <div class="content">
      <p>aici vine niste text</p></div>
      <div class="content">
      <p>aici vine niste text</p></div>
    </div>

    <div id="usersList">
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
    </div>


  <div id="inputTxt"></div>

  </div>

body{
    background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:88%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
 float:left;
  width:75%;
  height:88%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0px;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

$(function() {
  $( "#chatWindow" ).resizable({
    alsoResize: '#dragBar',

   });
    });

使底部部分成为固定部分。

---

Fiddle:尝试将溢出：隐藏添加到#聊天窗口

#chatWindow{overflow:hidden;}

---

此解决方案适用于底部，另一个问题呢？我设置了userslist的固定宽度，当我调整大小时，它会跳下