Question

我正在使用聊天应用程序，并希望使用flexbox设置聊天中消息的样式。但是，当我使用display: flex和flex-direction: row在一行中获取所有div时，消息的文本部分会溢出。如何获取父div（类别message）的大小以与message-text div中的文本量进行缩放？

.message {
  margin-top: 1%;
  border-top: solid 1px lightgrey;
  padding: 1%;
}

.message-icon {
  width: 60px;
  height: 60px;
  background: red;
  margin-right: 1%;
}

.message-name {
  width: 50px;
}

.message-text {
  width: 100%;
  min-height: 20px;
  padding: 2px;
  border-radius: 2%;
  display: inline-block;
}

<div class='message'>
  <div class='message-icon'></div>
  <div class='message-name'>Steve:</div>
  <div class='message-text'>THIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGE</div>
</div>

Answer 1

您在容器.message上使用flex，每个头等舱孩子都在其中.message-*弯曲

如果您是新手，我强烈建议您阅读this

.message {
  margin-top: 1%;
  border: solid 1px lightgrey;
  padding: 1%;
  display: flex; /* added */
  flex-direction: row; /* added */
}

.message-icon {
  width: 60px;
  height: 60px;
  background: red;
  margin-right: 1%;
}

.message-name {
  width: 50px;
}

.message-text {
  width: 100%;
  min-height: 20px;
  padding: 2px;
  border-radius: 2%;
  display: inline-block; /* you dont need this, since its flexing anyways */
}

<div class='message'>
  <div class='message-icon'></div>
  <div class='message-name'>Steve:</div>
  <div class='message-text'>THIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGE</div>
</div>

Flexbox：如何使包含div的刻度与孩子中的文本量一致？

1 个答案: