title: Scrollable Textarea in Bootstrap-4 Modal footer
body: <p>I am using Bootstrap-4 modal in my Angular-6 project. 
  For modal, Modal-Header is of fixed height, Modal-Body is scrollable and Modal-Footer is of variable height but not scrollable.</p>
  
  <p>Below is my basic HTML:</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>/*for debugging purpose*/
  .modal {
    display: block !important;
  }
  
  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-color: #e0e0e7;
    padding: 15px 20px 15px 55px;
    min-height: 70px;
    border-top: 1px solid #e9ecef;
  }
  
  .comment-input {
    position: relative;
    width: 100%;
    min-height: 40px;
  }
  
  .textarea {
    max-height: 80px;
    overflow: auto;
    width: 100%;
    min-height: 40px;
    padding: 10px 10px 10px 16px;
    word-wrap: break-word;
    line-height: 20px;
  }
  
  .textarea:empty:not(:focus)::before {
    content: 'Type your comments here';
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="modal" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;&lt;/div&gt;
        &lt;div class="modal-body"&gt;&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;div class="comment-input"&gt;
            &lt;div class="textarea" contenteditable="true"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make my textarea scrollable after insertion of four lines of text. Before the insertion of four lines of text, modal-footer should increase its height as textarea grows. I am trying to do the same by above HTML and CSS but somehow modal-footer is not getting increased by the height of textarea. Every possible solution will be appreciated. Thank you.</p>