我一直在尋找一種方法來像在現(xiàn)代聊天應用程序中一樣垂直擴展文本輸入表單。每個人都說我們應該使用textarea，因為表單輸入不允許多行，但是松弛和頻譜正在使用表單...（但不協(xié)調(diào)時使用text-area）我想從一行開始，當用戶輸入換行符（Shift + Enter）時，輸入將擴展到頂部。.chat-footer {  display: grid;  grid-template-rows: 90vh max-content;  height: 100%;  background-color: var(--color-i-bg);  grid-area: i;  border-top: 1px solid #ddd;  border-top: var(--color-i-border-top);  padding-bottom: 1rem;}.chat-footer__form {  align-self: end;  display: grid;  grid-row: 2 / 3;  grid-template-columns: 1fr max-content;  width: 100%;  height: 100%;  vertical-align: middle;  white-space: normal;  background: none;  line-height: 1;}.chat-footer__form::placeholder {  color: lightgrey;  font-size: 1em;}.chat-footer__form-container-input {  grid-column: 1/2;}.chat-footer__form-container-btn {  grid-column: 2/3;}.chat-footer__form-input {  width: 100%;  height: 100%;}.chat-footer__form * > button {  background-color: inherit;  border: 0;  line-height: normal;}.chat-footer__form * > button:hover {  cursor: pointer;}.chat-footer__form * > button:focus, .chat-footer__form * > button:active {  outline: 0;} <div class="chat-footer">        <form class="chat-footer__form" role="form">            <div class="chat-footer__form-container-input">                <input type="text" class="chat-footer__form-input" placeholder="New message">            </div>            <div class="chat-footer__form-container-btn">                <button class="chat-footer__form-btn" id="form-attach">Attach</button>                <button class="chat-footer__form-btn" id="form-smiley">Smiley</button>            </div>        </form>    </div>我不反對使用文本區(qū)域，如果它是一個更好的解決方案。