2：此答案的修订版
在这里
flex-direction: column-reverse;，您的朋友在对齐消息容器底部的消息时会执行所有操作，就像Skype和许多其他聊天应用程序一样。
.chat-window{ display:flex; flex-direction:column; height:100%;}.chat-messages{ flex: 1; height:100%; overflow: auto; display: flex; flex-direction: column-reverse;}.chat-input { border-top: 1px solid #999; padding: 20px 5px }.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }缺点
flex-direction: column-reverse;是IE / Edge /
Firefox中的错误，滚动条未显示
好处 是，您在移动设备/平板电脑上拥有〜90％的浏览器支持，而在台式机上拥有〜65％的浏览器支持，并且随着该漏洞的修复，……还有一种解决方法。
// scroll to bottomfunction updateScroll(el){ el.scrollTop = el.scrollHeight;}// only shift-up if at bottomfunction scrollAtBottom(el){ return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));}在下面的代码片段中，我从上面添加了2个功能，以使IE / Edge/Firefox具有相同的行为
flex-direction: column-reverse;。
function addContent () { var msgdiv = document.getElementById('messages'); var msgtxt = document.getElementById('inputs'); var atbottom = scrollAtBottom(msgdiv); if (msgtxt.value.length > 0) { msgdiv.innerHTML += msgtxt.value + '<br/>'; msgtxt.value = ""; } else { msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>'; } if (atbottom && (!isWebkit || isEdge)) { updateScroll(msgdiv); }}function resizeInput () { var msgdiv = document.getElementById('messages'); var msgtxt = document.getElementById('inputs'); var atbottom = scrollAtBottom(msgdiv); if (msgtxt.style.height == '120px') { msgtxt.style.height = 'auto'; } else { msgtxt.style.height = '120px'; } if (atbottom && (!isWebkit || isEdge)) { updateScroll(msgdiv); }}var isWebkit = ('WebkitAppearance' in document.documentElement.style);var isEdge = ('-ms-accelerator' in document.documentElement.style);var tempCounter = 6;function updateScroll(el){ el.scrollTop = el.scrollHeight;}function scrollAtBottom(el){ return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));}html, body { height:100%; margin:0; padding:0; }.chat-window{ display:flex; flex-direction:column; height:100%;}.chat-messages{ flex: 1; height:100%; overflow: auto; display: flex; flex-direction: column-reverse;}.chat-input { border-top: 1px solid #999; padding: 20px 5px }.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }button { width: 12%; height: 44px; margin-left: 5%; vertical-align: top; }.chat-messages-text{ overflow: auto; }@media screen and (-webkit-min-device-pixel-ratio:0) { .chat-messages-text{ overflow: visible; } @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }}@-moz-document url-prefix() { .chat-input-text { resize: none } }<div > <div > <div id="messages"> Long long content 1!<br/> Long long content 2!<br/> Long long content 3!<br/> Long long content 4!<br/> Long long content 5!<br/> </div> </div> <div > <textarea placeholder="Type your message here..." id="inputs"></textarea> <button onclick="addContent();">Add msg</button> <button onclick="resizeInput();">Resize input</button> </div></div>旁注1：该检测方法尚未完全测试，但应在较新的浏览器上运行。
旁注2：为聊天输入附加一个调整大小事件处理程序可能比调用updateScroll函数更有效。
注意：感谢 HaZardouS 重用其html结构
