Use justify-content: flex-end and to have vertical scrollbar
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; > 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? for your parent container use display: flex; flex-direction: column-reverse; overflow-y: auto; and remove flex-end from your child container.
6 Answers 6
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.
@lbartolic A copy? Not really. In fact there seems little in common between them. I certainly did not read yours before posting mine (that’s not how I roll), and mine includes some links to background that yours does not (gathered after extensive research, I might add), and the margin-top part that’s probably crucial to my answer isn’t in yours, so they may have some small parts the same but they’re clearly not.
I think ‘maring-top: auto’ is a good approach but works till we reach the height at which there is no space left at top, so margin auto doesn’t help, e.g. scroll starts appearing. I had to apply manual scroll with scrollTop = scrollHeight to achieve the always scrolled bottom position.
Interestingly the FF issue says it is RESOLVED FIXED , but I’ve just encountered this issue today in an up to date version.
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.
Finally, the only answer that got this right, without saying it’s a bug. You did not address the sender/receiver alignment, which can be solved with a simple property align-self on each class.
Also There is also another Solution
Remove the justify-content and add flex: 1 1 auto; property to the first element( create an empty div )
Old
New
//add this dummy div Item 1 Item 2 Item 3 .content-reversed < display: flex; flex-direction: column; >.content-reversed .fix
Sadly this does not work when the scrollbar appears, i.e. when the scrollbar appears I also want the messages to keep staying at the bottom
It seems to be a common bug among the browsers.
You should distribute your style onto 2 containers: the outer will be scrolled, and the inner will be a flex container. Also, you need some js to keep your message list scrolled to bottom while adding new messages.
Here is an example of code:
#inner-scroll < height: 100%; overflow: auto; >#inner-flex < display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; >.flex-item < /*nothing*/ >function messagePushCallback() < var scrollable=document.getElementById('inner-scroll'); scrollable.scrollTo(0, scrollable.scrollHeight-scrollable.clientHeight); >// for an example chat.onMessagePush(messagePushCallback); window.addEventListener('load', messagePushCallback); In JS, scrollable.scrollHeight shows the whole height of the element, including the space beyond its visible part, while scrollable.clientHeight is for the height of the visible part.
This solution works in both Firefox 57 and Chrome 63. The current most upvoted answer (using column-reverse instead of flex-end ) doesn’t seem to work in Firefox.
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? Look at this full-screen jsFiddle.
How to make vertical scroll content with FlexBox
I am trying to implement a scroll box with flex The Box element with the is taking the available space and the content is overflowing the Box How can i make the Box be overflow=auto and making the content scrollable spending hours to understand what is going on with flex here is a real example : https://codesandbox.io/s/flex-with-scroll-2cf9d
import React from "react"; import "./styles.css"; import < Box, Grid, CssBaseline >from "@material-ui/core"; export default function App() < return ( ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss flexDirection="column" display="flex" p=> > container spacing=> > item xs=> bgcolor="white"> ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ssss ); > 1 Answer 1
Add overflow auto on the Box component.
flexDirection="column" display="flex" p=> The below image is my understanding of the layout you’re describing. If that’s not what you’re looking for then you may need to add more clarity to your question.
Forcing vertical scrolling on a flexbox?
I’ve been trying to implement vertical scrolling on the section tag of my code. However, when I do overflow-y: scroll and set a height for the section, as stated other posts. However, when I do it, bubbles just wrap in the section block? I think it may be because of the flex boxing of the section. Is there a way to force it to vertical scroll and not column/row wrap? I’m relatively new to CSS so please point me to any duplicates. CSS
html < font-family: 'PT Sans', Georgia, serif; >.discussion < max-width: 600px; margin: 0 auto; display: flex; flex-flow: column wrap; >.discussion>.bubble < border-radius: 1em; padding: 0.25em 0.75em; margin: 0.0625em; max-width: 50%; >.discussion>.bubble.sender < align-self: flex-start; background-color: cornflowerblue; color: #fff; >.discussion>.bubble.recipient < align-self: flex-end; background-color: #efefef; >.discussion>.bubble.sender.first < border-bottom-left-radius: 0.1em; >.discussion>.bubble.sender.last < border-top-left-radius: 0.1em; >.discussion>.bubble.sender.middle < border-bottom-left-radius: 0.1em; border-top-left-radius: 0.1em; >.discussion>.bubble.recipient.first < border-bottom-right-radius: 0.1em; >.discussion>.bubble.recipient.last < border-top-right-radius: 0.1em; >.discussion>.bubble.recipient.middle
Hello This is a CSS demo of the Messenger chat bubbles, that merge when stacked together. Oh that's cool! Did you use JavaScript to perform that kind of effect? No, that's full CSS3! (Take a look to the 'JS' section of this Pen. it's empty! 😃 And it's also really lightweight! Dope! Yeah, but I still didn't succeed to get rid of these stupid .first and .last classes. The only solution I see is using JS, or a <div> to group elements together, but I don't want to . I think it's more transparent and easier to group .bubble elements in the same parent.