¿Cómo puedo evitar que el área de texto se extienda más allá de su elemento DIV padre?
Tengo este área de texto dentro de una tabla que está dentro de un DIV y parece que hace que toda la tabla se extienda fuera de sus límites.
Puede ver un ejemplo de la misma situación incluso en un caso más simple, simplemente colocando un área de texto dentro de un div (como el que se usa aquí en www.stackoverflow.com)
¿Puede ver en las imágenes a continuación que el área de texto puede extenderse más allá del tamaño de su padre? ¿Cómo puedo prevenir esto?
Soy un poco nuevo en CSS, por lo que realmente no sé qué atributos de CSS debería usar. Probé varios como pantalla y desbordamiento . Pero parece que no funcionan. ¿Algo más que me haya perdido?
ACTUALIZACIÓN: HTML
CSS
textarea {
max-width: 50%;
}
#container {
width: 80%;
border: 1px solid red;
}
#cont2{
width: 60%;
border: 1px solid blue;
}
Si pones este código dentro de http://jsfiddle.net , verás que actúan de manera diferente. Aunque el área de texto está limitada al porcentaje declarado en su estilo css, aún es posible hacer que su tabla padre sea tan grande como quiera, y luego puede ver que se desborda sobre su borde padre. ¿Alguna idea sobre como arreglar esto?
fuente