¿Cómo hacer un div responsivo desplazable dentro de un div con altura: 100vh?

Estoy tratando de hacer una caja de chat receptiva. Entonces mi div externo tiene altura: 100vh.

.g_chat { height:100vh; 

El post div está dentro de .g_chat . Así es como mi cuadro de chat se ve con los posts div teniendo una pequeña altura.

  #messages { max-height: 400px; 

enter image description here

Estoy intentando que los posts div g_chat dentro de g_chat div. Entonces cuando bash lo siguiente

  #messages { height:100vh; 

Esto hace que los posts div se vuelvan tan largos y no puedo ver los botones de formulario.

enter image description here

Este es mi file completo de 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; } } } } 

Este es mi file erb para mostrar el cuadro de chat.

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

Intenté varias combinaciones de altura, min-altura, altura máxima, con% y px y vh. ¿Alguien puede ayudarme a resolver esto? Gracias

Editar: Así es como se ve el 100% de altura. No se puede ver el formulario y no hay barra de desplazamiento.

 #messages { height: 100%; 

enter image description here

tratar

  #messages { height: 100%; }