Flexbox 布局和滚动条问题

Question

这是我的聊天框目标： Align multiple divs to bottom of parent

但是，问题是它不会在溢出后创建滚动条。

这是没有 Flex 的：

这是在应用 Flex 以将消息对齐到底部之后，但不允许我滚动：

 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>

是否可以使用 flexbox 修复滚动？我愿意接受其他解决方案

Answer 1

您需要min-height 属性才能使其工作

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>