CSS Div height not expanding to fit content or wrapping content

how to auto adjust the div height according to content in it
how to make div height expand with content
div height not expanding with content
dynamically change height of div based on content
dynamic height css
css height fit content
parent div not expanding to child height
prevent div from expanding

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;
}


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>

How to set the height in a CSS to be depending on the content, How do I make a div not larger than its contents? Hi, unless you have a fixed height, it should automatically expand to fit the content, unless of course the content is floats, then the parent needs the clerafix, or overflow:hidden; set on it (you could also float hte parent, but then THAT parent would need overflow set or clearfix) It would be much


Create a function to record in real time the number if char entered and to change the width of the the container accordingly using javascript.

Why does my div have no height?, How do I make my container div expand with content? Parent div not expanding to children's height. As you will see, I have a div (#innerPageWrapper) that wraps around the divs that contain the content. #innerPageWrapper also does act visually as a semi-transparent border in the layout.


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.

Wrapping a DIV around content and keeping it centered, (or width) of their parents. To prevent this, you can : set overflow:hidden; on the containers demo. I am wrapping my page inside a main wrapper div but outer div doesn't expand with inner div. I want height of main outer div main-wrapper to grow with page contents which is not happening for some reason. I am trying to figure out this problem for sometime but so far no success. I have set up jsFiddle Example. I would help in this regard.


Div not expanding even with content inside, However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its  But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height.


Div height not expanding to fit dynamic content, But as it can be seen the sidebar is getting out of the div. will the sidebar content be expanding by content that is added, or will the add overflow: hidden; to #wrapped and move the background from #primary to #wrapped. 100% height divs not expanding height to fit content (For now I've got all the CSS inline just so it's easier too read on this thread. I want the two div's to


How to make div height expand with its content using CSS , What is the difference between “word-break: break-all” versus “word-wrap: break-​word” The height property does not contains padding, margin and border of element. Example 1: This example use height: auto; property to display the content. CSS | fit-content() Property · How to set div width to fit content using CSS ? I'm building my first website utilizing CSS and was cruising along very nicely. I'm now discovering, however, that my divs will not expand vertically to accommodate the content as it changes. I'm having to manually assign heights to the divs, and if I remove those heights (or set them to auto) the divs are collapsing entirely.