Как сделать прокручиваемый отзывчивый div внутри div с высотой: 100vh?

Question

Я пытаюсь сделать отзывчивый чат. Так что мой внешний div имеет высоту: 100vh.

.g_chat { 
    height:100vh; 

сообщений, ДИВ внутри .g_chat. Так выглядит окно чата с сообщениями div, имеющими небольшую высоту.

#messages { 
    max-height: 400px; 

Я пытаюсь получить сообщения ДИВ, чтобы поместиться внутри g_chat DIV. Поэтому, когда я попробую следующее

#messages { 
    height:100vh; 

Это приводит к тому, что сообщения div становятся настолько длинными, и я не вижу кнопки формы.

Это мой полный файл СКС

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

Это мой эрб файл для отображения в окне чата.

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

Пробовал различные комбинации высоты, min-height, max-height, с% и px и vh. Может ли кто-нибудь помочь в решении этой проблемы? Thanks

Редактировать: Вот как выглядит высота 100%. Невозможно увидеть форму и прокрутку.

#messages { 
    height: 100%; 

Answer 1

попробовать

#messages { 
height: 100%; 
}