flexbox won't overflow with justify-content: flex-end

Question

I'm creating a chat with css flexbox, and as I want my messages to be diplay bottom of a container, I used justify-content: flex-end but when I have to many messages the div isn't scrollable with overflow: auto

I've read about a solution which is to reverse my .messages div and my .write-zone div and to replace flex-direction: column-reverse but this isn't a good solution for me because the content of my .messages div is dynamic, messages will be added and the scroll level won't follow, and I'd like to avoid controlling the scroll in javascript.

Does someone know any solution or trick to do this ?

Here's a fiddle showing skeleton of my code :

 .container { width: 60%; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; } .messages { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: auto; } .message { margin: 5px; height: 80px; display: flex; flex-direction: row; } .message.user { justify-content: flex-end; background-color: #2bf; } .message.other { justify-content: flex-start; background-color: #bbb; } .write-zone { width: 100%; height: 7%; display: flex; flex-direction: row; justify-content: space-around; } input { width: 80%; } 

 <div class="container"> <div class="messages"> <div class="message user"> Toto </div> <div class="message other"> Titi </div><div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> </div> <div class="write-zone"> <input type="text" /> <button> send </button> </div> </div> 

Answer 1

If I understand correctly, you're trying to have the messages align from the bottom and move up if new ones appear.

Using justify-content: flex-end on the container is correct, but if .messages is taking all available height, that still has no effect.

From .messages , remove the height: 100% and replace its justify-content: flex-end (which seems unnecessary) with margin-top: auto and I think you'll be a step further.

.messages {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    overflow-y: auto;
}

So the 'trick' you're looking for is an auto margin: https://www.w3.org/TR/css-flexbox-1/#auto-margins .

Answer 2

It sounds like your trying to make the chatbox scrollable when there are a lot of messages.

I found that by removing the justify-content flex-end from the .messages I'm able to scroll through the messages.

Hope this helps.

 .container { width: 60%; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; } .messages-container { height: 100%; max-height: 300px; overflow: auto; } .messages{ display: flex; flex-direction: column; /* justify-content: flex-end; */ overflow: auto; } .message { margin: 5px; height: 80px; display: flex; flex-direction: row; } .message.user { justify-content: flex-end; background-color: #2bf; } .message.other { justify-content: flex-start; background-color: #bbb; } .write-zone { width: 100%; height: 7%; display: flex; flex-direction: row; justify-content: space-around; } input { width: 80%; } 

 <div class="container"> <div class="messages"> <div class="messages-container"> <div class="message user"> Toto </div> <div class="message other"> Titi </div><div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> </div> </div> <div class="write-zone"> <input type="text" /> <button> send </button> </div> </div> 

Answer 3

You were almost there!

Two things that you can do to get you closer:

1. To prevent the flex items from collapsing ( dividing itself among the space of the container it's placed in ) is to set an explicit min-height instead of just a height
2. Create a container div that wraps your messages: .messages-container and give this an explicit max-height and overflow auto.

HTML:

<div class="messages">
    <div class="messages-container"> <!-- New Wrapping Container -->
       <div class="message user">

CSS:

    .message {
      min-height: 80px;
    }

   .messages-container {
      height: 100%;
      max-height: 300px;
      overflow: auto;
    }
   .messages{
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
      overflow: auto;
    }

Working Example:

 .container { width: 60%; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; } .messages-container { height: 100%; max-height: 300px; overflow: auto; } .messages{ display: flex; flex-direction: column; justify-content: flex-end; overflow: auto; } .message { margin: 5px; min-height: 80px; display: flex; flex-direction: row; } .message.user { justify-content: flex-end; background-color: #2bf; } .message.other { justify-content: flex-start; background-color: #bbb; } .write-zone { width: 100%; height: 7%; display: flex; flex-direction: row; justify-content: space-around; } input { width: 80%; } 

 <div class="container"> <div class="messages"> <div class="messages-container"> <div class="message user"> Toto </div> <div class="message other"> Titi </div><div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> <div class="message user"> Toto </div> <div class="message other"> Titi </div> </div> </div> <div class="write-zone"> <input type="text" /> <button> send </button> </div> </div>