переполнение не работает при загрузке данных в div с другой страницы

Question

Привет, ребята, после работы над сценарием, я столкнулся с проблемой, когда я извлекаю данные с другой php страницы через ajax.

, вот мой div, где данные должны отображаться ..

            <div id="show_msg">

            </div>

Вот моя 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%);
}

Вот моя 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('');
                }
            }
        })
    }
});

Вот моя php страница, откуда данные извлекаются:

<?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

Попробуйте добавить следующую строку в ваш стиль #show_msg:

overflow:both;

Таким образом, ваш окончательный стиль будет выглядеть так:

#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;
}