Comment puis-je empêcher le textarea d'étirement au-delà de son élément DIV parent? (google chrome-problème uniquement)

Question

Comment puis-je empêcher le textarea d'étirement au-delà de son élément DIV parent?

J'ai ce textarea à l'intérieur d'un tableau qui est à l'intérieur d'un DIV, et il semble qu'il provoque de l'ensemble de la table pour étirer hors de ses limites.

Vous pouvez voir un exemple de la même situation, même dans le plus simple des cas, il suffit de mettre une zone de texte dans une div (comme ce qui est utilisé ici dans www.stackoverflow.com)

Vous pouvez voir sur les images ci-dessous que le textarea peut s'étirer au-delà de la taille de son parent? Comment puis-je éviter cela?

Je suis un peu nouveau pour CSS, donc je ne sais pas vraiment quoi attributs CSS dois-je utiliser. J'ai essayé plusieurs comme d'affichage, et de débordement. Mais ils ne semblent pas faire l'affaire. Autre chose que j'ai peut-être raté?

Mise à JOUR: HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

Si vous mettez ce code à l'intérieur de la http://jsfiddle.net, vous verrez qu'ils agissent différemment. Bien que le textarea est limitée au pourcentage a déclaré dans son style, il est toujours possible de le faire à cause de sa table de parent à être aussi grand qu'il veut être, et puis vous pouvez voir qu'il répand son parent frontière. Toute réflexion sur la façon de résoudre ce problème?

Answer 1

Dans le cas où je vous ai bien compris...:

textarea {
    resize: none;
}

Ou, vous pouvez limiter la taille:

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