How to remove background gap of text messages CSS - html

Question

I'm building a React Chat app. My background of messages works fine with a short text. The background responsively changes according to text-content.
With longer text, when I scale the browser, there are certain points where the background appears larger than the fit-content. Below are the pictures of the same message.
No Gap
With Gap
Here is my React code:
<div className={`chatMessage ${message.sender._id === state._id && "myMessage"}`}>
<div className="messageHeader">
<span className="chatName"> {message.sender.name} </span>
<span className="timeStamp"> {message.timestamp.substring(0, 10)} </span>
</div>
<div className="messageContent">
<span>{message.message}</span>
<small className="timeStamp"> {message.timestamp.substring(12, 20)} </small>
</div>
</div>
Here is my CSS:
.chatMessage {
display: flex;
height: auto;
position: relative;
font-size: 16px;
padding: 2px 10px 0px 10px;
max-width: 350px;
margin-bottom: 10px;
}
.myMessage > .messageContent {
background-color: #dcf8c6 !important;
}
.chatMessage > .messageContent {
background-color: rgb(221, 221, 221);
}
.messageContent {
position: relative;
bottom: 25px;
padding: 2px 10px 0px 10px;
border-radius: 10px;
right: -5px;
}
I believe the max-width property is causing the problem. But I can't figure out how to work around it.