How to make a scrollable responsive div inside a div with height: 100vh?

Question

I am trying to make a responsive chat. So my outer div has a height: 100vh.

.g_chat { 
  height:100vh;

The div messages are inside .g_chat. Here's what the chat window looks like with div messages having a small height.

  #messages { 
    max-height: 400px;

I am trying to get div messages to fit inside a g_chatdiv. Therefore, when I try to do the following

  #messages { 
    height:100vh;

This causes the div messages to become so long and I don’t see the form button.

This is my full scss file.

.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;
      }
    }
  }
}

This is my erb file for displaying the chat window.

  <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>

Tried various combinations of height, min-height, max-height, with% and px and vh. Can anyone help to solve this problem? Thanks

Edit: This is what 100% height looks like. Unable to see shape and scroll.

#messages { 
    height: 100%;

Answer 1

 #messages { 
height: 100%;
}