How to make a ul tag inside div scroll-able

Question

I am new to designing so i am making a chat box but when after filling value in box it div going up , how to make that div scroll to down i tried all solution from internet but none is working , so i have two problem div scroll should be at bottom and div refresh 2 second here is code

<div class="col-sm-3 col-sm-offset-4 frame" style='margin-top:-8px;' id='huge'>
<ul id="mylist" stye="">

<?php 
  $conn = new PDO("mysql:host=localhost;dbname=chatbox",'root');
  $stmt = $conn->prepare("select * from chatbox order by created");
  $stmt->execute();
  if($stmt->rowCount() > 0)
  {
    while($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        if($_SESSION['username']==$row['user_name']){
?>
<li style="width:100%" id="bottom">
  <div class="msj macro">
    <div class="avatar"><img class="img-circle" style="width:100%;" src="img/unknown.png" /></div>
    <div class="text text-l" id="">
      <p>
        <?php echo $row['msg']; ?>
      </p>
      <p><small><?php echo date('H:i', strtotime($row['created']));?></small></p>
    </div>
  </div>
</li>
<?php }else{ ?>
<li style="width:100%; color:white;" id="myid">

  <div class="msj-rta macro">
    <div class="text text-r">
      <p>
        <?php echo $row['msg']; ?>
      </p>
      <p><small><?php echo date('H:i', strtotime($row['created']));?></small></p>
    </div>
    <div class="avatar" style="padding:0px 0px 0px 10px !important">
      <img class="img-circle" style="width:100%;" src="img/unknown.png" /></div>
</li>
<?php 
    }}}
?>
</ul>
<div>
<form role='insert'>
  <input type='hidden' class="mytext" name='user_name' id='user_name' value="<?php echo $_SESSION['username'] ?>" />
  <div class="msj-rta macro" style='margin-right:30px;margin-bottom:-40px;'>
    <div class="text text-r" style="background:whitesmoke !important;">
      <input class="mytext" placeholder="Type a message" name='msg' id='msg' />
    </div>
  </div>
  <div style="padding-left:240px;margin-bottom:20px;">
    <button type="submit" class="login-button" id='submit'><i class="fa fa-chevron-right"></i></button>
  </div>
</form>
</div>
</div>
</body>
 <script>
 $(document).ready(function() {
  $("#submit").click(function() {
    var user_name = $("#user_name").val();
    var msg = $("#msg").val();
    if (msg == '' || msg == '') {
      alert("Please Fill All Fields");
    } else {
      $.ajax({
        type: "POST",
        url: "user/chatInsert.php",
        data: 'user_name=' + user_name + '&msg=' + msg,
        cache: false,
        success: function(result) {
          window.location.reload();
        }
      });
    }
    return false;
  });
});

I tried every possible code to effect my code but none is working , so please try to help me please.

Answer 1

I'm not sure what you're asking but based on your title, this is how you make a block scrollable.

 .scrollable { overflow: auto; height: 100px; } 

 <div class="scrollable"> <ul> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> <li>this is a list</li> </ul> </div>