textarea resize parent div container

Question

How can I make a div grow in height when a text-area is resized 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 goes out of its container, how can i make the height of the parent div grow with the size of the text area?

Picture of problem

Answer 1

Your .reply div will be resized automatically if you do not give fixed height. if you want to resize only vertically than try using -

textarea {
    resize: vertical;
    overflow: auto;
}

jsfiddle

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