如何防止Bootstrap面板比浏览器更大？

Question

我正在构建一个node.js应用程序。

HTML

  <div class="row">
    <div class="col-md-10">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Chat</h3>
        </div>
        <div class="panel-body">
          <ul id="messages"></ul>
          <form id="chat">
            <div class="input-group">
              <input type="text" class="form-control" id="input" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary" id="send">Send</button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Users</h3>
        </div>
        <div class="panel-body">
          <div class="list-group" id="users"></div>
        </div>
      </div>
    </div>
  </div>
</div>

问题

随着聊天消息和用户被添加到每个面板，除非用户滚动，否则两个面板都会超出浏览器可以看到的范围。

我希望两个面板都以100％的浏览器高度开始，并且不会超过浏览器大小，因此浏览器上没有滚动，但我希望用户能够在每个面板中自行滚动！

更新

在答案中建议使用下面的CSS仍会在窗口上显示滚动条，还有如何将表单固定到聊天面板的底部并在其上方滚动？

.panel {
    height: 100vh;
    max-height: 100vh;
    position: relative;
}
.panel-body {
    overflow: auto;
    position: absolute;
    top: 40px;
    bottom: 15px;
    left: 0;
    right: 0;
}