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

Question

I am having problems getting the content in a div (or its value) to wrap around inside and having the div's height adjust to the contents.

The top one a container, message-box. There are three divs inside like in the picture attached. I need to have divs each-message and each-message-content adjust its height to fit the contents inside. I have looked at many posts in this site and tried many combinations of overflow:hidden and height:auto, but they mostly end up making the each-message-content scroll sideways, and am at wits end.

How can I achieve this?

**** Updated with 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

Not very elegant to break words like this, but if that's what's needed. btw apart from className , there's an extra in your HTML.

EDIT: Ignore the comment about className - react project comment added after this answer was posted.

 .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

if your CSS div height not expanding to fit content or wrapping content. Just use a simple trick.

before the closing tag of the message-box div add a div with class cl <div class="message-box"><div class="cl"></div></div>

Now in your Css Give this style .cl{clear:both;}

by using this if you have height auto on the div it will still wrap the content.I hope it will work for you.