如何在溢出时使用 flex 增长：滚动； 物品？

Question

I have an input area with variable height (up to a max-height of 120px). Above it will be a list of chat messages. With my example below, the input area expands in height but overlaps the list of messages as it grows.

I would like the container .messages to shrink in height as this happens, and ideally preserve its scroll position at the bottom of the container to see the last message posted.

 ul, li { list-style: none; margin: 0; padding: 0; } .container { display: flex; flex-direction: column; height: 100vh; flex: 1; } .messages { overflow: scroll; flex-grow: 1; } .input { overflow: scroll; max-height: 120px; height: auto; padding: 5px; background: #efefef; }

 <div class='container'> <ul class='messages'> <li>Message 1</li> <li>Message 2</li> <li>Message 3</li> <li>Message 4</li> <li>Message 5</li> <li>Message 6</li> <li>Message 7</li> <li>Message 8</li> <li>Message 9</li> <li>Message 10</li> <li>Message 11</li> <li>Message 12</li> <li>Message 13</li> <li>Message 14</li> <li>Message 15</li> <li>Message 16</li> <li>Message 17</li> <li>Message 18</li> <li>Message 19</li> <li>Message 20</li> <li>Message 22</li> <li>Message 23</li> <li>Message 24</li> </ul> <div class='input' contenteditable> </div> </div>

Answer 1

You will need to add some JavaScript to your application. I have changed your class messages for an id instead (same should apply to your input window), since you only have one window for each.

<div id="input" oninput="ScrollToBottom();"> </div>

function ScrollToBottom() {
var objDiv = document.getElementById("messages");
    objDiv.scrollTop = objDiv.scrollHeight;
}

/* You might want to call the function once your page loads as well 
   simply by adding this */
ScrollToBottom(); 

See code snippet below for an example:

 function test() { var objDiv = document.getElementById("messages"); objDiv.scrollTop = objDiv.scrollHeight; } /* call the function one time as well for when the window loads */ test();

 ul, li { list-style: none; margin: 0; padding: 0; } .container { display: flex; flex-direction: column; height: 100vh; flex: 1; } #messages { overflow: scroll; flex-grow: 1; } .input { overflow-y: scroll; overflow-x: hidden; max-height: 120px; padding: 5px; background: #efefef; }

 <div class='container'> <ul id='messages'> <li>Message 1</li> <li>Message 2</li> <li>Message 3</li> <li>Message 4</li> <li>Message 5</li> <li>Message 6</li> <li>Message 7</li> <li>Message 8</li> <li>Message 9</li> <li>Message 10</li> <li>Message 11</li> <li>Message 12</li> <li>Message 13</li> <li>Message 14</li> <li>Message 15</li> <li>Message 16</li> <li>Message 17</li> <li>Message 18</li> <li>Message 19</li> <li>Message 20</li> <li>Message 22</li> <li>Message 23</li> <li>Message 24</li> <li>Message 25</li> <li>Message 26</li> <li>Message 27</li> <li>Message 28</li> <li>Message 29</li> <li>Message 30</li> </ul> <div class='input' oninput='test();' contenteditable> User currently writing... </div> </div>