Papaa Papaa - 25 days ago 9
CSS Question

Div automatically takes it's max-width

The problem is no matter what is inside

chat_ttc
it will always be 300px.

Snippet:



.chat_ttc {
max-width: 300px;
word-break: break-word;
background: #e5e5e5;
margin-left: 70px;
position: relative;
border-radius: 15px;
border-bottom-left-radius: 0px;
padding: 4px;
padding-left: 6px;
letter-spacing: 0.6;
}

<div class="froma_tc">
<div class="chat_ttc">D</div>
</div>




Answer

yaa its because div is block element and it takes 100% of the width as you have given max-width as 300px width will be always 300px

if you want to take some valid width make div as inline-block

check this snippet

.chat_ttc {
  max-width: 300px;

  display:inline-block;
  word-break: break-word;
  background: #e5e5e5;
  margin-left: 70px;
  position: relative;
  border-radius: 15px;
  border-bottom-left-radius: 0px;
  padding: 4px;
  padding-left: 6px;
  letter-spacing: 0.6;
}
<div class="froma_tc">
  <div class="chat_ttc">D</div>
</div>

Hope this helps