Textarea resize container of parent div

Question

How can I make a div grow tall when the text area changes in html?

I have the following code

<div class="reply"> <p>Please enter your reply:</p> <textarea rows="4" cols="80"></textarea> <br /> <input type="submit" value="Submit reply"/> <div class="clear"></div> </div> 

However, when the user resizes, the text area exits from its container, how can I increase the height of the parent div with the size of the text area?

Problem Image

Answer 1

Your .reply div will be resized automatically if you don't give a fixed height. if you want to resize only vertically than try to use -

 textarea { resize: vertical; overflow: auto; } 

jsfiddle

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/resize