title: Creating expandable chat text input with maximum height with no JS
body: <p>I'm trying to implement the following design (For now I'm just worried about the text box):</p>
  
  <p><a href="https://i.stack.imgur.com/g7CwN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7CwN.png" alt="enter image description here"></a></p>
  
  <p><strong>When typing:</strong>
  <a href="https://i.stack.imgur.com/601gZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/601gZ.png" alt="enter image description here"></a></p>
  
  <p><strong>Maximum height:</strong>
  Notice the top and bottom paddings were decreased.
  <a href="https://i.stack.imgur.com/tSPfb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tSPfb.png" alt="enter image description here"></a></p>
  
  <p>Now, this is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.chat-wrapper {
    width: 100%;
  }
  
  .message-text {
    resize: none;
    box-sizing: border-box;
    height: auto;
    min-height: 41px;
    max-height: 97px;
    width: 387px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background-color: #f9fafb;
    outline: none;
    padding: 0 24px 0 24px;
    overflow: hidden;
  }
  
  textarea {
    resize: none;
    box-sizing: border-box;
    height: auto;
    min-height: 41px;
    max-height: 97px;
    width: 387px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background-color: #f9fafb;
    outline: none;
    padding: 0 24px 0 24px;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="chat-wrapper"&gt;
    &lt;p&gt;
      Using div with contentEditable:
    &lt;/p&gt;
    &lt;div class="message-text" contentEditable&gt;&lt;/div&gt;
    &lt;br/&gt;
    &lt;p&gt;
      Using regular textarea:
    &lt;/p&gt;
    &lt;textarea&gt;&lt;/textarea&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now for the input text box, I have two solutions:</p>
  
  <ul>
  <li>Using <strong>div</strong> with <strong>contentEditable</strong> attribute, it works and it is expandable to a certain height. But the text is not centered vertically (I'm trying to avoid using Flex, just to make sure old browsers are compatible, not very strict about that though)</li>
  <li>Using textarea, it is more semantic IMHO, but it doesn't expand automatically.</li>
  </ul>
  
  <p>I want also to detect the keypress event (I don't think it is a problem in both solutions).</p>
  
  <p>Which solution do you think is the web standard? If both are good, how do make the div centers the text, and shrink the paddings when it grows? Or in the case of textarea, how do I make it expand without JS?</p>
  
  <p>Also if you have any better suggestions, let me know.</p>
  
  <p><strong>UPDATE:</strong>
  I just realized how messy is the option (div with contentEditable):
  <a href="https://i.stack.imgur.com/o2j6D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o2j6D.png" alt="enter image description here"></a>
  As you can see, first I can't wrap the text to lines when the text is more than the width.
  Second, the text inside the div, is not clean ! Especially when copy-pasting. I need it to be pure text so when I use JS to get the content, I get just the text not the html tags.</p>