How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

To disable resizing completely:

textarea {    resize: none;}

To allow only vertical resizing:

textarea {    resize: vertical;}

To allow only horizontal resizing:

textarea {    resize: horizontal;}

Or you can limit size:

textarea {    max-width: 100px;     max-height: 100px;}

To limit size to parents width and/or height:

textarea {    max-width: 100%;     max-height: 100%;}

Textarea resize control is available via the CSS3 resize property:

textarea { resize: both; } /* none|horizontal|vertical|both */textarea.resize-vertical{ resize: vertical; }textarea.resize-none { resize: none; }

Allowable values self-explanatory: none (disables textarea resizing), both, vertical and horizontal.

Notice that in Chrome, Firefox and Safari the default is both.

If you want to constrain the width and height of the textarea element, that's not a problem: these browsers also respect max-height, max-width, min-height, and min-width CSS properties to provide resizing within certain proportions.

Code example:

#textarea-wrapper {  padding: 10px;  background-color: #f4f4f4;  width: 300px;}#textarea-wrapper textarea {  min-height:50px;  max-height:120px;  width: 290px;}#textarea-wrapper textarea.vertical {   resize: vertical;}

<div id="textarea-wrapper">  <label for="resize-default">Textarea (default):</label>  <textarea name="resize-default" id="resize-default"></textarea>    <label for="resize-vertical">Textarea (vertical):</label>  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea></div>