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 class="message-box"><div class="cl"></div></div>

的div

现在在你的Css中给出这种风格.cl{clear:both;}

如果你在div上有自动高度，它仍将包装内容。我希望它能为你效用。