CSSについて：LINEやSlackのようなチャットUIを実装したい

Question

  html, body {
      width: 100vw;
      height: 100vh;
      padding: 0;
      margin: 0;
    }
    body {
      /*タッチデバイスやmacでスクロールされないようにする*/
      overflow: hidden;
      position:absolute;
    }

  .row {
     position: relative;
     overflow: auto;
     height: 80vh;
   }

h1
  | Chat Room

.container.overflow-auto
  .row.mt-4
    .col-10.offset-1
      #messages data-room_id= @room.id
        = render @messages
.container
  .row
    .col-8.offset-2.fixed-bottom
        form id="test_form" class="border"
          .form-control.border-bottom.border-top-0.border-right-0.border-left-0
            input type="file" id="picture" class="col-6"
            input type="button" value="送信" id="chat" class="col-2 offset-4"
          textarea id="content" class="form-control border-0"

.message
    p
      = message.user.email.sub!(/@.*/m, " さん")
      = message.content

#実現したいこと
チャットライクなUIを実装しています。
やりたいこととしては、チャットが追加される時にLineやSlackのように下から上にチャットが追加されるようにしたいです。

#困っていること
今現在のUIでは掲示板みた感じになっておりチャットが追加されると上から下にチャットが追加されているのでそれを逆にしたいです。

#使用している技術
Bootstarp4
rails
jquery

Answer 1

https://codeday.me/jp/qa/20190203/202091.html
こんな感じのものを利用すればよいかと。