Как сделать тег ul внутри div с возможностью прокрутки

Question

Я новичок в проектировании, поэтому я делаю окно чата, но когда после заполнения значения в поле оно делится вверх, как сделать этот прокруткой прокрутки вниз, я перепробовал все решения из Интернета, но ни одно не работает, поэтому у меня есть два проблема с прокруткой div должна быть внизу, а div обновляется через 2 секунды вот код

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

Я пробовал все возможные коды, чтобы повлиять на мой код, но ни один из них не работает, поэтому, пожалуйста, попробуйте мне помочь.

Answer 1

Я не уверен, что вы спрашиваете, но исходя из вашего заголовка, именно так вы делаете прокрутку блока.

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