如何在CSS中设置聊天框的样式？

Question

我有一个如下所示的聊天框：

我的主要问题是，当我希望宽度按文本量自动调整大小时，所有消息都是固定宽度。这些元素都是聊天div中的所有跨度，其中显示了块（内联或内联块将并排显示）和更改的边距以使消息“粘”＆＃39;到一边。这是我的css

.psentMessage {
    text-align: right !important;
    background-color: #F0F0F0;
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
}
.pmessage {
    text-align: left !important;
    background-color: white;
    margin-left: 0 !important;
    border-top-left-radius: 0 !important;
}
.pmessage, .psentMessage {
    display: block !important;
    padding: 2vh 1vw;
    max-width: 85%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    border-style: hidden;
    border-radius: 10px;
}

如何让div自动调整大小但仍然在这个布局中使用它们？

Answer 1

这可以通过带有flex-direction: column;的Flexbox布局来解决。

添加align-items: flex-start;时，每封邮件的宽度都会根据内容进行调整。将align-self: flex-end;添加到要与右侧对齐的邮件中。

简化示例：https://codepen.io/anon/pen/bMobqM

HTML：

<div>
<p class="other">Hello</p>
<p class="other">This is the project managment app</p>
  <p>gwkki</p>
<p class="other">hello</p>
  <p class="other">hi</p>
<p>Hello</p>
  <p class="other">online</p>
</div>

CSS：

div {
  background: #ccc;
  padding: 20px;
  width: 150px;
  display: flex;
  flex-direction:column;
  align-items: flex-start;
}

p {
  background: #fff;
  padding: 10px;
}

.other {
  align-self: flex-end;
  background: #ddd;
}

有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/