CSS의 성장 (더 JQuery와)

Question

내가

div{ 
 
    padding: 20px; 
 
}

<div style="display:flex; background: gold; flex-direction: column;"> 
 
    <textarea>Do NOT expand this</textarea> 
 
    <textarea class="expand">Expand this baby</textarea> 
 

 
</div>

나는 텍스트 영역에 내용이 "확장"할 때 원하는 다음 한 상상이 부모를 확대하기 위해 수직 오버 플로우를 생성하지 div, 이 아닌을 사용하면 세로 스크롤을 만들 수 있습니다.

Answer 1

저는 이것이 CSS만으로는 불가능하다고 생각합니다. 그리고 jQuery를 원하지 않으므로 순수 JS 솔루션이 여기에 있습니다. 아이디어는 내용

var tex = document.querySelector('textarea.expand'); 
 

 
tex.addEventListener('keydown', resize); 
 

 
function resize() { 
 
    setTimeout(function() { 
 
    tex.style.height = 'auto'; //needed when you remove content so we reduce the height 
 
    tex.style.height = tex.scrollHeight + 'px'; 
 
    }, 0); 
 
}

div { 
 
    padding: 20px; 
 
}

<div style="display:flex; background: gold; flex-direction: column;"> 
 
    <textarea>Do NOT expand this</textarea> 
 
    <textarea class="expand">Expand this baby</textarea> 
 
</div>