CSS Div高度未扩展为适合内容或包装内容

Question

我在将div中的内容（或其值）包装到内部并使div的高度适应内容时遇到问题。

最上面的是一个容器，消息框。 如图所示，里面有三个div。 我需要让divs每个消息和每个消息内容调整其高度以适合内部的内容。 我查看了该站点上的许多帖子，并尝试了许多overflow：hidden和height：auto的组合，但是它们大多最终使每个消息内容的滚动向侧面倾斜，并且很不明智。

我该如何实现？

****更新为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

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

Answer 3

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

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

现在在您的CSS中给此样式.cl{clear:both;}

如果您在div上具有height auto，则使用此功能仍然可以包装内容。希望它对您有用。