メッセージ送信機能の実装

Question

簡易チャットアプリを作成しているのですが、メッセージ送信機能が分からなくなりました。

https://gyazo.com/b101bee816f25a328c4fa13999e3aa1f
こちらの動画のようにメッセージがはみ出て表示されます。

https://gyazo.com/0aeedcc14f88aac8e1799343cc450742
こちらは見本のアプリですが、このように表示させたいです。

メッセージ投稿はちゃんと出来ています。
やってみた実装内容については、下のフォーム部分が固定されていないからではないか？と思ったので、
cssにpositionを当ててみました。
メッセージ送信についての記述は

.messages
  = render @messages

なので、これを置く場所を色々試していました。
いずれもビューが崩れるだけで見本のように正常にメッセージが動作しませんでした。
よろしくお願いします。

補足
先ほど、下のフォーム部分が下に移動してしまう原因が判明しました。
メッセージ投稿される部分のクラス名が消してしまっていました。
フォーム部分は問題なくなったのですが、やはりメッセージは、はみ出ます。
引き続きよろしくお願いします。
https://gyazo.com/5377d5e4f4f157670bc77363b46201b5

Answer 1

自己解決しました。
スクロールしたい箇所にoverflow: scroll;を当てました。
申し訳ありません。