html - Flexbox:如何根据子项中的文本量制作包含 div 的比例？

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，每个第一层的 child 都在那里 flex .message-*

如果您不熟悉 flex ，我强烈建议您阅读 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>