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

Probably you've already solved this, but I faced this problem too and found a solution by trial and error, so I'm going to share it.

Having parent container's display set to flex display: flex and child's items align to flex-end align-items: flex-end will prevent overflow-y: auto to work.

Instead, you can leave you can use next CSS properties for your parent container (in your case session-textchat):

display: flex;
flex-direction: column-reverse; /* 'column' for start, 'column-reverse' for end */
overflow-y: scroll; /* or overflow-y: auto ... */

This will make your child div appear on the bottom of parent container (it will act like flex-end) and enable vertical scroll if content height is bigger than parent container.

I made a little jsfiddle for you if this sounds confusing: https://jsfiddle.net/lbartolic/9od4nruy/3/

In jsfiddle you can see header part, content part and footer. Container has fixed height and each part takes required height to fill the container. Content part _b__content will be scrollable if its content is taller than _b__content's height.

I hope this will help someone. Cheers.