message screen resize

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="content">
-      <div class="messagesContainer">
+      <div id="messagesContainer" class="messagesContainer">
         <div id="messages" class="messages">
           <message msg="Hey :D" />
           <message msg="Du bist blööööd xD" />
@@ -75,10 +75,9 @@ body{
 .messagesContainer{
   position: absolute;
   margin: 0;
-  padding-bottom: 1rem;
   left: 0;
   top: 0;
-  height: calc(100% - 5rem);
+  height: calc(100% - 4rem);
   width: 100%;
   overflow-y: auto;
 }

src/components/newMessage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="newMessageBanner">
-    <textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
+    <label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" />
     <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
   </div>
 </template>
@@ -20,9 +20,11 @@ export default {
   mounted() {
     ResizeListener(document.getElementById("newMessageInput"));
     document.getElementById("sendMessageBtn").addEventListener("click", () => {
-      sendMessage.methods.callSendMessage(document.getElementById("newMessageInput").value)
+      if (document.getElementById("newMessageInput").value !== '') {
-      document.getElementById("newMessageInput").value = ''
+        sendMessage.methods.callSendMessage(document.getElementById("newMessageInput").value)
-      //sendMessage.methods.callSendMessage(this.data.message)
+        document.getElementById("newMessageInput").value = ''
+        //sendMessage.methods.callSendMessage(this.data.message)
+      }
     })
   },
   data: function () {
@@ -31,11 +33,14 @@ export default {
 }
 
 export const ResizeListener = id => {
-  id.addEventListener("input", resize);
+  id.addEventListener("input", function(){
-}
+    this.style.height = '1.25rem'
-function resize() {
+    this.style.height = `${this.scrollHeight}px`
-  this.style.height = "auto";
+    let msgContainer = document.getElementById("messagesContainer")
-  this.style.height = `${this.scrollHeight}px`;
+    msgContainer.style.height
+        = `calc(100% - ${this.parentElement.clientHeight}px)`
+    //msgContainer.scrollTo(0, msgContainer.scrollHeight)
+  });
 }
 </script>
 
@@ -52,12 +57,13 @@ function resize() {
   }
   .newMessageInput{
     position: relative;
-    margin-top: 0.5rem;
+    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
     left: 2rem;
-    min-height: 3rem;
+    min-height: 1.25rem;
     max-height: 14rem;
     width: calc(100% - 7rem);
+    height: 1.25rem;
     background-color: #fff0;
     border: 0 solid #fff0;
     color: #fff;