CODEWITHSUNDEEP
javascripthtmlcss
bigmugcup
bigmugcup

Reputation: 1351

CSS Div height not expanding to fit content or wrapping content

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

enter image description here

Upvotes: 1

Views: 2553

Answers (3)

Sumit Kumar
Sumit Kumar

Reputation: 493

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.

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

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>

Upvotes: 1

Saras Narain
Saras Narain

Reputation: 11

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.

Upvotes: 0

Related Questions