h1 Make box chat flexible on Web vs Mobile like Chatwork
.chat
  .chat__message Mess show here
  .chat__box
    textarea.chat__box-textarea
      

textarea {
  resize: none;
}
h1 {
  display: flex;
  justify-content: center;
}
.chat {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 340px;
  background-color: #ccc;
  &__message {
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__box {
    &-textarea {
      width: 97%;
      min-height: 40px;
      max-height: 120px;
      padding: 2px 3px;
      overflow-y: auto;
      &:focus {
        outline: none;
      }
    }
  }
}

$('.chat__box-textarea').on('click', function () {
      var autoExpand = function (field) {

        // Reset field height
        field.style.height = 'inherit';

        // Get the computed styles for the element
        var computed = window.getComputedStyle(field);

        // Calculate the height
        var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
          + parseInt(computed.getPropertyValue('padding-top'), 10)
          + field.scrollHeight
          + parseInt(computed.getPropertyValue('padding-bottom'), 10)
          + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

        field.style.height = height + 'px';

      };

      document.addEventListener('input', function (event) {
        if (event.target.tagName.toLowerCase() !== 'textarea') return;
        autoExpand(event.target);
      }, false);
    });