overflow isnt working when loading data into div from another page - php

Question

hey guys after working on the script, im facing a problem where im fetching the data from another php page through ajax.
here is my div where the data is to be shown..
<div id="show_msg">
</div>
Here is my css :
#show_msg {
width: 100%;
border: 1px solid #D8D4D4;
border-right: none;
border-left: none;
min-height: calc(96% - 4%);
height: calc(96% - 4%);
max-height: calc(96% - 4%);
}
Here is my JS :
$('#send_btn').click(function(){
var msgContent = $('#message_input').val();
if(msgContent == '')
{
alert('message to likh bhai');
}
else
{
$.ajax({
url: 'lib/function.php',
method: 'POST',
data:{func: 'send_msg', msgContent:msgContent},
success: function(data)
{
if(data == 'sent')
{
$('#message_input').val('');
}
}
})
}
});
Here is my php page from where data is getting fetched :
<?php
include 'connect.php';
global $con;
$get_data = mysqli_query($con, "SELECT * FROM messages");
while($row = mysqli_fetch_array($get_data))
{
?>
<div id="chat_box">
<img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
<div class="content-2">
<p style="font-weight: bold;font-size:13px;">BaTuTa</p>
<p class="comment"><span><?php echo $row['message_body'] ?> </span></p>
</div>
</div>
<?php
}
?>

Answer 1

Try to add the following line to your #show_msg style :
overflow:both;
So your final style looks like:
#show_msg {
width: 100%;
border: 1px solid #D8D4D4;
border-right: none;
border-left: none;
min-height: calc(96% - 4%);
height: calc(96% - 4%);
max-height: calc(96% - 4%);
overflow:both;
}