Use justify-content: flex-end and to have vertical scrollbar

Question

I have chat and I need to scroll all content to bottom. I want to use justify-content: flex-end and to have vertical scrollbar.

Answer 1

You have to turn .session-textchat into a flex column then margin-top: auto on .past-messages to send it to the bottom. Then play with overflow-y: scroll and some jQuery:

function updateScroll() {
  $("#chat").animate({ scrollTop: $('#chat').prop("scrollHeight")}, 1000);
}
updateScroll();
$("#send_button").on('click', updateScroll);

.session-textchat {
  display: flex;
  flex-direction: column;
  height: 300px;
  margin-bottom: 30px;
  background: #fff;
  overflow-y: scroll;
}
.session-textchat .past-messages {
  margin-top: auto;
  width: 100%;
  max-width: 980px;
}
.session-textchat .past-messages .receiver,
.session-textchat .past-messages .sender {
  width: 100%;
  min-height: 47px;
  margin: 0 0 20px 0;
}
.session-textchat .past-messages .receiver .message,
.session-textchat .past-messages .sender .message {
  position: relative;
  padding: 15px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.session-textchat .past-messages .receiver {
  text-align: left;
}
.session-textchat .past-messages .receiver .message {
  background: #f4f4f4;
  color: #535353;
}
.session-textchat .past-messages .sender {
  text-align: right;
}
.session-textchat .past-messages .sender .message {
  background: url("../img/rgbapng/0050ff26.png");
  background: rgba(0, 80, 255, 0.15);
  color: #0050ff;
}

  

    

      

        
        Good afternoon David. Welcome to your appointment! How are you today?
      
      
      

        
        Hello doctor. I feel terrible to be honest.
      
      
      

        
        I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?
      
      
      

        
        Hello doctor. I feel terrible to be honest.
      
      
      

        
        I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?
      
      
    
  
  

    
  
  

    Send message
  

Look at this full-screen jsFiddle.