While developing a chat app, I encountered an issue with CSS styling. I assigned a specific class to incoming messages and set a max-width limit for the container element. However, instead of the width adjusting based on the content within it, the message width became equal to the max-width defined.
.chat-message-box {
max-width: 50%;
background: rgba(196, 68, 235, 0.5);
margin: 5px;
margin-top: 25px;
margin-right: 20px;
border-radius: 25px;
padding: 20px;
text-justify: auto;
overflow-wrap: break-word;
}