聊天ui的响应宽度

Question

我正在尝试创建一个聊天插件，如下所示

​

​

如何使聊天消息div响应？

我还想让这个自动滚动到更新的聊天，目前我正在使用这个

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

这样的结果，它不会立即滚动到较新的聊天，它总是等待几秒钟

​

​

编辑1

这是我当前的聊天css

.message {
    margin: 0 15px 20px;
    padding: 10px 20px;
    position: relative;
    font-size: 15px;
    width: auto;
    min-width:1vw;
    max-width: 80%;
}
.message.to {
    background-color: #673ab7;
    color: #fff;
    margin-left: auto;
    text-align: right;
    white-space: pre-wrap;
    border-radius: 10px 10px 0px 10px;
}
.message.from {
    background-color: #e5e4e9;
    color: #363636;
    margin-right: auto;
    border-radius: 10px 10px 10px 0px;
}

现在它看起来像这样

​

​

Answer 1

在没有太多代码的情况下，我将为您提供一个响应式

​

body{
  margin:0;
}
.container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 800px;
  max-width: 100%;
  background: salmon;
  padding: 15px;
}
.message {
    margin: 0 15px 20px;
    padding: 10px 20px;
    position: relative;
    font-size: 15px;
    width: auto;
    min-width:1vw;
    max-width: 80%;
}
.message.to {
    background-color: #673ab7;
    color: #fff;
    margin-left: auto;
    text-align: right;
    white-space: pre-wrap;
    border-radius: 10px 10px 0px 10px;
}
.message.from {
    background-color: #e5e4e9;
    color: #363636;
    margin-right: auto;
    border-radius: 10px 10px 10px 0px;
}

<div class="container">
  <div class="message from">Hi</div>
  <div class="message from">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur nisl nec velit lacinia facilisis. Vivamus quis nunc eu nisi fermentum pharetra sit amet quis purus. Nunc rutrum nisl nec rutrum commodo. Suspendisse potenti. Aenean quis porttitor turpis. Nulla nibh nulla, euismod ac pretium vel, viverra at arcu. Proin eu sem non sem eleifend congue. Fusce scelerisque, massa ut finibus ultricies, urna odio suscipit justo, nec feugiat ex ex at est. Mauris nec eleifend nulla, sit amet egestas nulla. Cras vel magna quis ante sollicitudin semper. Phasellus in turpis ut sem malesuada rutrum at eget ipsum.</div>
  <div class="message to">Hi</div>
  <div class="message to">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur nisl nec velit lacinia facilisis. Vivamus quis nunc eu nisi fermentum pharetra sit amet quis purus. Nunc rutrum nisl nec rutrum commodo. Suspendisse potenti. Aenean quis porttitor turpis. Nulla nibh nulla, euismod ac pretium vel, viverra at arcu. Proin eu sem non sem eleifend congue. Fusce scelerisque, massa ut finibus ultricies, urna odio suscipit justo, nec feugiat ex ex at est. Mauris nec eleifend nulla, sit amet egestas nulla. Cras vel magna quis ante sollicitudin semper. Phasellus in turpis ut sem malesuada rutrum at eget ipsum.</div>
</div>

​