CODEWITHSUNDEEP
htmlcss
yevhensh
yevhensh

Reputation: 410

html, css automatically resize/adjust width to fit content

I have some html content with following structure:

<div class="message-container">
  <p class="message-value">someVal</p>
  <div class="message-attribute">someUsername</div>
  <div class="message-attribute">11-09-2017 12:30</div>
</div>

So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.

I also wan't to specify max-width for this props.

I've done this:

.message-container {
  resize: both;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  color: #ffffff;
  border-radius: 20px;
  min-width: 100px;
  max-width: 400px;
  width: auto;
  height: auto;
  background-color: #80CBC4;
}

.message-value {
  resize: both;
  float: left;
  max-width: 380px;
  word-wrap: break-word;
  height: auto;
}

.message-attribute {
  padding-left: 50px;
  width: 150px;
  display: block;
  color: #607D8B;
}

and message-username and message-datetime has fixed width.

Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down

https://jsfiddle.net/Lwrpegqe/

As you can see in jsfiddle width is too long with following content it could be shorter

Main purpose to resize block automatically

Upvotes: 1

Views: 18225

Answers (4)

Shivam Jha
Shivam Jha

Reputation: 4462

just use w-100 in bootstrap 4 to fit to 100% width of container element

Upvotes: 0

Vishal
Vishal

Reputation: 109

Give width and height in percentage (%). Hope it will work for you.

.your-class {
  width:100%;
  height:100%;
}

Upvotes: 0

Gezzasa
Gezzasa

Reputation: 1453

Add display: inline-block; to your .message-container

Inline elements only take up the space of the content. A div is always a block element unless specified.

Upvotes: 1

Robert Williams
Robert Williams

Reputation: 1410

See the solution.

.message-container {
  resize: both;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  color: #ffffff;
  border-radius: 20px;
  min-width: 100px;
  max-width: 400px;
  width: auto;
  height: auto;
  background-color: #80CBC4;
}

.message-value {
  resize: both;
  float: left;
  max-width: 380px;
  word-wrap: break-word;
  height: auto;
  display: inline;
}

.message-attribute {
  padding-left: 50px;
  width: 150px;
  display: inline;
  color: #607D8B;
}

https://jsfiddle.net/Lwrpegqe/2/

Upvotes: 1

Related Questions