Как переносить текст из input на новую строку в div'е?

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

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

<template>
  <div id="app">
      <div v-for='comment in comments' class="comment">
        <div class="comment_text">{{ comment.text }}</div>
      </div>

      <div class="footer">
        <div class="div_input"><input type="text" v-model='message'></div>
        <div class="div_button"><button v-on:click='addComment'>Написать консультанту</button></div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      comments: [
        {name: 'Лилия Семёновна', text: 'Вероника, здравствуйте! Есть такой вопрос: Особый вид куниц жизненно стабилизирует кинетический момент? ', time: '14 октября 2011'}
      ],
      message: ''
    }
  },
  methods: {
    addComment(){
      if(this.message != ''){
        this.comments.push({
        name: 'Гость',
        text: this.message,
         . . .
        });
      }
      this.message = '';
    },
  }
}
</script>

<style>
  .comment{
    margin-top: 20px;
    padding: 0px 20px 0px 20px;
  }
  .comment_text{
    max-width: 680px;
    background-color: #f1fbff;
    padding: 10px;
    margin-top: 15px;
    color: #FFF;
    position: relative;
    font-size: 12px;
    line-height: 20px;
    -webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
    -moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
    box-shadow: 0px 0px 0px 1.5px #cfcfcf;
    color: #333333;
    font-size: 12pt;
    font-family: Arial, sans-serif;
  }
  .comment_text:before {
    content: "";
    display: block;
    border-bottom: 15px solid #f2fbff;
    border-right: 20px solid transparent;
    border-left: 0px solid transparent; 
    position: absolute;
    top: -15px;
    left: 22px;
  }
  .footer{
    margin-top: 25px;
    background-color: #f2f2f2;
    padding-top: 30px;
  }
  .div_input input{
    width: 85%;
    height: 65px;
    margin: 0px 6% 25px 6%;
    padding: -10px 10px auto 10px;
    color: #333333;
    font-size: 12pt;
    font-family: Arial, sans-serif;  
  }
  .div_button{
    width: 100%;
    text-align: center;
    padding-bottom: 33px;
  }
  .div_button button{
    border-radius: 30px;
    background-color: #fdd639;
    min-height: 45px;
    width: 57%;
    font-size: 16pt;
    font-weight: bold;
    color: #484333;
    border: 0;
    cursor: pointer;
  }
</style>

И подскажите еще пожалуйста, как сделать рамку на выступающем углу в блоке с комментарием?