如何在高度为100vh的div内制作一个可滚动的响应div？

Question

我正在尝试制作一个响应式聊天框。所以我的外部div有高度：100vh。

.g_chat { 
  height:100vh;

消息div位于.g_chat内。这就是我的聊天框在高度较小的消息div中的显示方式。

  #messages { 
    max-height: 400px;

我试图让消息div适合g_chat div。所以，当我尝试以下

  #messages { 
    height:100vh;

这导致消息div变得太长，我看不到表单按钮。

这是我的完整scss文件

.g_chat { // the WHOLE chat window, including messages, form and hide/show button
  z-index: 1;
  width: 300px;
  height:100vh;
  position: fixed;
  right: 0;
  bottom: 0;
  border: 1px solid #404040;
  background-color: #FDFDFD;
  border-radius: 5px 5px 0 0;
  &.collapsed { // chat window is collapsed
    height: auto;
    .global_chat_inner {
      display: none;
    }
  }

  .g_chat_toggler { // the actual button to hide/show chat window
    cursor: pointer;
    color: #fff;
    background-color: #404040;
    padding: 7px 0px 7px 0px; 
  }

  form { // form to submit message
    margin-top: 8px;
    padding: 0px 2px 0px 2px; 
  }

  #messages { // all messages are displayed here
    background-color: #f2f4f5;
    height:100vh;
    overflow-y: auto;
    overflow-x: hidden;
    .message {
      padding: 2px 5px 0px 5px; 
      margin-bottom: 10px;
      background-color: #fff;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

这是我的erb文件，用于显示聊天框。

  <div class="global_chat_inner">
    <div id="messages">
      <%#= render @messages %>
      <%= render partial: 'messages/message', collection: @messages, as: :message  %>
    </div>

    <%= form_for @message, url: '' do |f| %>
    <%#= f.label :body %>

      <div class="row">
        <div class="col-md-9 nopadding">
          <%= f.text_field :body, autocomplete: "off", placeholder: "Type a message ...", autofocus: true, class: 'form-control' %>
        </div>
        <div class="col-md-3 nopadding">
          <%= f.submit 'Send', class: 'form-control chatbutton' %>
        </div>        
      </div>

    <% end %>
  </div>

</div>

尝试高度，最小高度，最大高度，％和px和vh的各种组合。有人可以帮忙解决这个问题吗？感谢

编辑：这是100％高度的样子。看不到表单而没有滚动条。

#messages { 
    height: 100%;

Answer 1

尝试

 #messages { 
height: 100%;
}