width of paragraph not the width of the text - css

Question

I'm doing a message app with html js and php, but the css of the messages does something I don't uderstand : basically the width of the p isn't the with of the text but the max-width of the parent element here's the image of what happens : messages
i've tried multiple things, like assigning a static width but the width should change with the text, the php output is put in the chat-box with jquery
.chat-area header {
display : flex;
align-items : center;
padding : 18px 30px;
}
.chat-box {
height : 500px;
background : #f7f7f7;
padding : 10px 30px 20px 30px;
box-shadow : inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
overflow-y : auto;
}
.chatbox .chat {
margin : 15px 0;
}
.chatbox .chat p {
word-wrap : break-word;
padding : 8px 16px;
}
.chatbox .outgoing {
display : flex;
}
.chatbox .incoming {
display : flex;
}
.outgoing .details {
margin-left : auto;
max-width : calc(100% - 130px);
margin-right : 10px;
}
.outgoing .details p {
margin-left : auto;
position : relative;
background : #333;
color : #fff;
padding : 10px;
border-radius : 18px 18px 0px 18px;
margin-bottom : 10px;
}
.incoming .details {
margin-left : 10px;
margin-right : auto;
max-width : calc(100% - 130px);
}
.incoming .details p {
color : #333;
background : #fff;
border-radius : 18px 18px 18px 0px;
padding : 10px;
margin-bottom : 10px;
}
<section class="chat-area" style="width : 100%">
<header>
<i class="fas fa-arrow-left" id="goBackToSearch"></i>
<div class="content">
<div class="details">
<span id="CalledName">Admin</span>
<p>Active Now</p>
</div>
</header>
<div class="chat-box">
</div>
<form action="#" class="typing-area" autocomplete="off">
<input type="text" class= "input-field" placeholder="Scrivi un messaggio...">
<button><i class='bx bxs-caret-right-circle' ></i>
</form>
</section>
$query = "
SELECT *
FROM messages
WHERE outgoing_msg_id = :outgoing_id AND incoming_msg_id = :incoming_id
OR outgoing_msg_id = :incoming_id2 AND incoming_msg_id = :outgoing_id2
";
$output = "";
$check = $pdo->prepare($query);
$check->bindParam(':outgoing_id', $outgoing_id, PDO::PARAM_STR);
$check->bindParam(':outgoing_id2', $outgoing_id, PDO::PARAM_STR);
$check->bindParam(':incoming_id', $id, PDO::PARAM_STR);
$check->bindParam(':incoming_id2', $id, PDO::PARAM_STR);
$check->execute();
$messages = $check->fetchAll(PDO::FETCH_ASSOC);
for($i=0;$i<$check->rowCount();$i++){
if ($messages[$i]["outgoing_msg_id"] == $outgoing_id){ //he is a message sender
$output .= '<div class="chat outgoing">
<div class="details">
<p>'.$messages[$i]["msg"].'</p>
</div>
</div>';
} else if ($messages[$i]["outgoing_msg_id"] == $id) { //he is a message receiver
'<div class="chat incoming">
<div class="details">
<p>'.$messages[$i].'</p>
</div>
</div>';
}
}
echo $output;