Solution 1 :

You need min-height property to make it work

let chatText2 = document.getElementById("chat-text-with-flex");
let chatInput = document.getElementById("chat-input");
let chatForm = document.getElementById("chat-form");

chatForm.onsubmit = (e) => {
  e.preventDefault();

  chatText2.innerHTML += "<div>" + chatInput.value + "</div>";
 $("#chat-bg").scrollTop($("#chat-bg")[0].scrollHeight);
};
#chat-bg {
  position: relative;
  height: 100%;
  width: 519px;
  height: 141px;
  overflow: auto;
}

#chat-text-with-flex {
  margin-top: 5;
  padding-left: 10;
  border: solid 1px black;
  background-color: red;
  width: 502px;
  height: auto;
  overflow: scroll;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#chat-text div,
#chat-text-with-flex div {
  color: white;
  border: solid 1px black;
  background-color: blue;
  word-wrap: break-word;
  width: 482;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat-bg">
  <div id="chat-text-with-flex">

   <div> the problem is fixed 1</div>
   <div> the problem is fixed 2</div>
   <div> the problem is fixed 3</div>
   <div> the problem is fixed 4</div>
   <div> the problem is fixed 5</div>

  </div>
</div>

<form id="chat-form">
  <input id="chat-input" type="text" style="width:500px" autocomplete="off">
</form>

Problem :

This was my goal for my chatbox:
Align multiple divs to bottom of parent

However, the issue is that it won’t create a scrollbar after overflow.

This is without Flex:
Chatbox with divs

This is after applying Flex in order to align messages to bottom, however won’t allow me to scroll:

Chatbox with Flexbox

 let chatText = document.getElementById('chat-text');
 let chatText2 = document.getElementById('chat-text-with-flex');
     let chatInput = document.getElementById('chat-input');
     let chatForm = document.getElementById('chat-form');


   chatForm.onsubmit = (e) => {
          e.preventDefault(); 

        
                chatText.innerHTML += '<div>' + chatInput.value + '</div>';
                 chatText2.innerHTML += '<div>' + chatInput.value + '</div>';
     }
  
    #chat-bg {
          position: relative;
          height: 100%;
          width: 519px;
          height: 141px;
          overflow: auto;
         

     }
     
     #chat-text {
          position: absolute;
          margin-top: 5;
          padding-left: 10;
          border: solid 1px black;
          background-color: red;
          height: 112px;
          width: 502px;
          overflow-y: auto;
          color: black;


       


     }
  #chat-text-with-flex {
          position: absolute;
          margin-top: 5;
          padding-left: 10;
          border: solid 1px black;
          background-color: red;
          height: 112px;
          width: 502px;
          overflow-y: auto;
          color: black;


          display: flex;
          flex-direction: column;
          justify-content: flex-end;


     }

     #chat-text div,#chat-text-with-flex div {
          color: white;
          border: solid 1px black;
          background-color: blue;
          word-wrap: break-word;
          width: 482;
     }
<div id="chat-bg">
     <div id="chat-text">

          <div>Normal chatbox, scrollbar working after overflow</div>
          <div>Normal chatbox, scrollbar working</div>
          <div>Normal chatbox, scrollbar working</div>
 
     </div>
</div>






<div id="chat-bg">
     <div id="chat-text-with-flex">

          <div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
           <div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
            <div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
             <div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
            
     </div>
</div>

<form id="chat-form">
     <input id="chat-input" type="text" style="width:500px" autocomplete="off">
</form>

Is it possible to scroll with the flexbox fix? I’m open to other solutions

Comments

Comment posted by Dan

The problem is, you’ll have to scroll to see new messages and my goal is a ‘bottom-up’ chatbox

Comment posted by Ferin Patel

@Dan Edited my code for scoll to bottom. using jQuery

By

Leave a Reply

Your email address will not be published. Required fields are marked *