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

Question

How can i prevent the textarea from stretching beyond his parent DIV elemnt?

I have this textarea inside a table that it is inside a DIV and it seems that it cause the entire table to streach out of it's bounds.

You can see an example of the same situation even in a more simple case, just putting a text area inside a div (like what is used here in www.stackoverflow.com)

You can see from the images below that the textarea can stretch beyond the size of it's parent? how do i prevent it?

I'm kind of new to CSS so i don't really know what CSS attributes should i be using...i tried several like Display, and Overflow. But they don't seem to make the trick. Anything else i have might of missed?

UPDATE: HTML

CSS

textarea { max-width: 50%; }

container {

width: 80%;
border: 1px solid red;

}

cont2{

width: 60%;
border: 1px solid blue;

} ​

if you put this code inside the http://jsfiddle.net you will see that they act differently, although the textarea is limited to the percentage declared in his css style, it is still possible to get him to cause his table parent to be as large as it wants to be, and then you can see that it goes out of the parent border. Any thoughts on how to fix this? ​

Answer 1

In case i understood you correctly...:

textarea {
    resize: none;
}

Or you can limit size:

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