Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
24 days ago

Using justify-content: flex-end causes the scrollbar to vanish.

I am trying to implement a chat feature where I need to scroll to the bottom of the content. I am considering using "justify-content: flex-end" to achieve this, but I also need a vertical scrollbar. The current implementation uses flexbox properties like "display", "align-items" and "justify-content". The existing code effectively positions the chat messages in a vertical stack with justified content and provides a scrollbar when there is overflow. Could you suggest a better approach or confirm if this method will work? An implementation example is available at this link.
Answers(2)
avatar
Vogi
23 days ago
Verified Answer
You can use the CSS property overflow-y: auto; to add a vertical scrollbar to your chat feature. This will automatically hide the horizontal scrollbar and present only the vertical scrollbar. You can also customize the width of the scrollbar as required and change its color using CSS scrollbars styling module. To scroll to the bottom of the content, you can use JavaScript's scrollTop() function. Here is an example of how you can use it with jQuery: 
$('#myMessageContainer').stop().animate({
    scrollTop: $('#myMessageContainer')[0].scrollHeight
});
This will smoothly scroll to the bottom of the container with id myMessageContainer. I hope this helps! Let me know if you have any other questions.

Sources

CSS scrollbars styling - CSS: Cascading Style Sheets | MDNjavascript - Chat box, auto scroll to bottom - Stack OverflowChat Application UI Design and html with smooth scrollbarMaking a div vertically scrollable using CSS - GeeksforGeeksHow can I implement Facebook chat vertical scrollbar style?
avatar
Tolerim
24 days ago
Yes, it's possible. You can add the following CSS to the .past-messages class to achieve this: 
height: 320px;
  max-height: 320px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
This will give the .past-messages element a fixed height with a vertical scrollbar when the content overflows. The justify-content: flex-end property will ensure that the content is always aligned to the bottom of the container. Here's an updated example on JSFiddle.
;