How to make append div text visible without scroll?

Question

Sorry for the low quality question...

i'm working on chat bot project, Searched lot and coded lot. All works except append html div place below the input tag.. each time scroll up to see the last message. All i need is last message stays visible. Please see the image for more detail

Ok... This is my code..

<div class="chat-flow">
    <div class="cloudchatreverse">
        <div>
            <blockquote class="blockquote-reverse">
                <p class="text-right">How do you do ?</p>
            </blockquote>
        </div>
    </div>
    <div class="cloudchat">
        <div>
            <blockquote class="blockquote">
                <p>Hey I'm fine thanks... Can you able to login with twitter</p>
            </blockquote>
        </div>
    </div>
</div>
<input type="text" id="post_message" name="message" placeholder="What's up" autofocus required>

and the style

.chat-flow {    /* scroll bar */
        overflow: scroll;
        height: 200px;
    }

if you need anything i can provide right way...

Update:

This is for when submit and append from client side

$(function(){
    document.onkeydown=function(evt){
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if(keyCode == 13)
        {
            var post_message = document.getElementById("post_message").value;
            $(".cloudchat").append('<div class="cloud"><blockquote class="blockquote-reverse">'+ post_message +'</blockquote></div>');
            var request = {};
            request.post_message = post_message;
            //your function call here
                $.ajax({
                    type: "POST",
                    url: "{% url 'post_message' %}",
                    data: JSON.stringify(request),
                    contentType: 'application/json;charset=UTF-8',
                    success: function(result){
                        document.getElementById('post_message').value='';
                        console.log(result);
                    }
                })
        }
    }
})

Answer 1

Try this it scrolls to bottom

  $(document).keydown(function (evt) { if (evt.which == 13) { var post_message = $("#post_message").val(); $(".cloudchat").append('<div class="cloud"><blockquote class="blockquote-reverse">' + post_message + '</blockquote></div>'); var scroll=$('.cloudchat').height(); $('.chat-flow').animate({ scrollTop:scroll },200) } }) 

 .chat-flow { /* scroll bar */ overflow: scroll; height: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="chat-flow"> <div class="cloudchatreverse"> <div> <blockquote class="blockquote-reverse"> <p class="text-right">How do you do ?</p> </blockquote> </div> </div> <div class="cloudchat"> <div> <blockquote class="blockquote"> <p>Hey I'm fine thanks... Can you able to login with twitter</p> </blockquote> </div> </div> </div> <input type="text" id="post_message" name="message" placeholder="What's up" autofocus required>