我正在學習CSS。我有一個包含靈活的文本區的div。現在，我希望當用戶在textarea中輸入多行內容時，textarea和外部div自動擴展高度，當textarea超過3行時，停止擴展并滾動textarea。我應該如何寫CSS？

呈現的代碼:

.outerdiv {
  height: auto;
  display: flex;
}

.outerdiv textarea {
  height: 100%;
  flex-grow: 1;
}

<div class="outerdiv">
  <textarea></textarea>
</div>

我不認為有css解決方案。

然而，這個JS有點像你想要的:

function updateTextarea() {
   var textarea = document.getElementById("textarea");
    // Get line height of the textarea
   var lht = parseInt($('textarea').css('lineHeight'),10);
    // Get lines 
   var scrlht = textarea.scrollHeight;
   var lines = Math.floor(scrlht / lht);
   
   if (lines < 4) {
    textarea.style.height = '15px'
    textarea.style.height = (lines * lht) + 'px'
   }
 }

textarea {
line-height: 15px;
height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <textarea id='textarea' oninput="updateTextarea()"></textarea>
</div>

你可以把這個絕對精彩的答案改寫如下:

textarea {
  height: 1rem;
}

<textarea 
  data-max-height = "48" 
  name="text" 
  oninput='this.style.height = "";this.style.height = Math.min(this.scrollHeight, this.getAttribute("data-max-height")) + "px"'
  >
</textarea>