Flexbox layout and scrollbar issue

user_6622844 0
Viewed 138

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

flexbox css html
1 Answers

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>

user_118124500
Related