Автоматическое изменение высоты textarea вверх?

Question

[Николай]

Необходимо сделать автоматическое расширение поля ввода textarea вверх, при этом желтый блок должен занимать все доступное ему пространство. Красный блок ограничен по высоте и ширине. Пока что-то не могу даже решить в каком направлении двигаться... flexbox?

Answer 1

[0xD34F]

<div class="container">
  <div class="yellow"></div>
  <textarea></textarea>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

textarea {
  background: #47f;
  line-height: 20px;
  resize: none;
}

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  const maxHeight = 300;
  const height = 20 * this.value.split('\n').length;
  this.style.height = `${Math.min(height, maxHeight)}px`;
});

textarea.dispatchEvent(new Event('input'));

Comments

[Николай]

Очень похоже на то! Видимо таки flex. Вот только поле не расширяется при наборе текста, а только по кнопке enter.

[Николай]

https://youtu.be/EyogTSw-A50

[SeaW]

Piterski, можно поменять textarea на div[contenteditable] и будет работать как вам нужно
https://codepen.io/anon/pen/Ryrpmo

[0xD34F]

Только ещё надо будет ограничить высоту div'а и задать ему overflow:

<div class="container">
  <div class="yellow"></div>
  <div contenteditable="true"></div>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

div[contenteditable] {
  background: #47f;
  max-height: 300px;
  overflow-y: auto;
}

Answer 2

[davidnum95]

На голом css без js не получится так сделать. Единственный выход использовать contentEditable="true":
так

Comments

[Николай]

Никогда не работал с contentEditable, но решение интересное. Насколько я знаю там есть определенны, скажем так, особенности работы с последующим value этого блока. Например перевод строки превращается в еще один <div>...</div>. Отсюда возможно будут последующие сложности с передачей данных на сервер, нужно писать какой-то парсер. Ну это лишь мои предположения.