CSS Div 高度未扩展以适应内容或包装内容

Question

我在获取 div 中的内容（或其值）以环绕内部并使 div 的高度适应内容时遇到问题。

顶部的一个容器，消息框。里面有三个div，如附图所示。我需要让 div 每个消息和每个消息内容调整其高度以适应里面的内容。我查看了该站点中的许多帖子，并尝试了许多溢出：隐藏和高度：自动的组合，但它们最终使每个消息内容都横向滚动，并且束手无策。

我怎样才能做到这一点？

**** 更新为 HTML *****

<div className="message-box">
 <div className="each-message-box">
   <div className="each-message">
     <div className="each-message-date">Date</div>
     <div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
     </div>
   </div>
 </div>
</div>

.each-message-box {
  width: 100%;
  display: block;
  overflow: auto;
  height: auto;
  margin: 1px;
}

.each-message {
  width: 270px;
  height: 100px;
  margin: 2px;
  border: 1px solid #ccc;
  overflow: hidden;
  height: auto;
}

.each-message-date {
  border: 1px solid #ccc;
  font-size: 10px;
  color: #ccc;
  text-align: left;
}

.each-message-content {
  width: 100%;
  border: 1px solid #ccc;
  text-align: left;
  border-radius: 10px;
  height: auto;
}

Answer 1

这样断词不是很优雅，但如果需要的话。顺便说一句，除了className，您的 HTML 中还有一个额外的内容。

编辑：忽略关于 className 的评论 - 发布此答案后添加的反应项目评论。

.each-message-box {
  width: 100%;
  display: block;
  overflow: auto;
  height: auto;
  margin: 1px;
}

.each-message {
  width: 270px;
  height: 100px;
  margin: 2px;
  border: 1px solid #ccc;
  overflow: hidden;
  height: auto;
  word-break: break-all;
}

.each-message-date {
  border: 1px solid #ccc;
  font-size: 10px;
  color: #ccc;
  text-align: left;
}

.each-message-content {
  width: 100%;
  border: 1px solid #ccc;
  text-align: left;
  border-radius: 10px;
  height: auto;
}

<div class="message-box">
  <div class="each-message-box">
    <div class="each-message">
      <div class="each-message-date">Date</div>
      <div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
      </div>
    </div>
  </div>
</div>

Answer 2

创建一个函数来实时记录输入字符的数字，并使用javascript相应地更改容器的宽度。

Answer 3

如果您的 CSS div 高度未扩展以适应内容或包装内容。 只需使用一个简单的技巧。

在消息框 div 的结束标记之前添加一个类 cl 的 div <div class="message-box"><div class="cl"></div></div>

现在在你的 Css 中给这个样式.cl{clear:both;}

如果您在 div 上有自动高度，则使用它仍然会包装内容。我希望它对您有用。