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.

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

Thanks in advance!
Srdjan

Answer 1

I just had to face this issue myself and, after concluding it is a bug, I came up with a workaround.

In summary, don't use justify-content: flex-end but rather put a margin-top: auto on the first child. Unlike flex-end this doesn't break the scrollbar functionality, and it bottom-aligns the contents when they're not overflowing the container.

Example based on @SrdjanDejanovic's fiddle is at https://jsfiddle.net/peter9477/4t5r0t5b/

In case the example isn't available, here's the relevant CSS:

#container {     overflow-y: auto;     display: flex;     flex-flow: column nowrap;     /* justify-content: flex-end; DO NOT USE: breaks scrolling */ } #container > :first-child {     margin-top: auto !important;     /* use !important to prevent breakage from child margin settings */ } 

An alternative workaround that I believe I've also used is to add an extra container for the scrollbar. Use the flex-end on the inner container and have the outer container handle the scrolling. I generally dislike workarounds that require adding dummy elements though, so I prefer my CSS-only solution above.