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.
.session-textchat { height: 320px; background: #fff; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column;}.session-textchat .past-messages { width: 100%; max-width: 980px; margin: 0 auto; height: 83.92%; overflow-y: auto; padding: 30px 0 0; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-direction: column; flex-direction: column;}.session-textchat .past-messages .receiver,.session-textchat .past-messages .sender { width: 100%; min-height: 47px; margin: 0 0 20px; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}.session-textchat .past-messages .receiver .message,.session-textchat .past-messages .sender .message { position: relative; padding: 17px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}.session-textchat .past-messages .receiver { text-align: left; -webkit-justify-content: flex-start; justify-content: flex-start;}.session-textchat .past-messages .receiver .message { background: #f4f4f4; color: #535353;}.session-textchat .past-messages .sender { text-align: right; -webkit-justify-content: flex-end; justify-content: flex-end;}.session-textchat .past-messages .sender .message { background: url('../img/rgbapng/0050ff26.png'); background: rgba(0, 80, 255, 0.15); color: #0050ff;}
<div class="session-textchat"><div class="past-messages"><div class="receiver"><span class="message"> Good afternoon David. Welcome to your appointment! How are you today?</span></div><div class="sender"><span class="message"> Hello doctor. I feel terrible to be honest.</span></div><div class="receiver"><span class="message"> I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?</span></div><div class="sender"><span class="message"> Hello doctor. I feel terrible to be honest.</span></div><div class="receiver"><span class="message"> I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?</span></div></div></div>
Example is here.
Is it possible? Or please give me better solution.