¿Cómo puedo evitar que el área de texto se extienda más allá de su elemento DIV padre? (solo problema de google-chrome)

¿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?

Para deshabilitar el cambio de tamaño por completo:

textarea {
    resize: none;
}

Para permitir solo el cambio de tamaño vertical:

textarea {
    resize: vertical;
}

Para permitir solo el cambio de tamaño horizontal:

textarea {
    resize: horizontal;
}

O puede limitar el tamaño:

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

Para limitar el tamaño al ancho y / o alto de los padres:

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

El control de cambio de tamaño de Textarea está disponible a través de la propiedad de cambio de tamaño de CSS3 :

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

Los valores permitidos se explican por sí mismos: none(deshabilita el cambio de tamaño del área de texto) both, verticaly horizontal.

Tenga en cuenta que en Chrome, Firefox y Safari el valor predeterminado es both.

Si desea limitar el ancho y la altura del elemento de área de texto, eso no es un problema: estos navegadores también respetan max-height, max-width, min-height, ymin-width las propiedades CSS para proporcionar el cambio de tamaño dentro de ciertas proporciones.

Ejemplo de código :

#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>

Estoy esperando que usted está teniendo el mismo problema que yo tuve ... mi problema era simple: Hacer un área de texto fijo con porcentajes encerrados en el interior del contenedor (soy nuevo en CSS / JS / HTML, por lo oso conmigo, si yo no entiendo la jerga correcta) de modo que, independientemente del dispositivo en el que se muestre, la caja que llena el contenedor (la celda de la tabla) ocupa la cantidad correcta de espacio. Así es como lo resolví:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

Entonces CSS se ve así ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

Perdón por el bloque de código descuidado aquí, pero tuve que mostrarte lo que es importante y no sé cómo insertar el código CSS entre comillas en este sitio web. En cualquier caso, para asegurarse de que ve de lo que estoy hablando, el CSS importante está menos sangrado aquí ...

Lo que hice luego (como se muestra aquí) fue ajustar muy específicamente los porcentajes hasta que encontré los que funcionaban perfectamente para adaptarse a la pantalla, sin importar qué pantalla de dispositivo se use.

Por supuesto, creo que el "resize: none;" es exagerado, pero es mejor prevenir que curar y ahora los consumidores no tendrán que cambiar el tamaño de la caja, ni importará desde qué dispositivo lo estén viendo.

Funciona muy bien.

textarea {
width: 700px;  
height: 100px;
resize: none; }

asigne su ancho y alto requeridos para el área de texto y luego use. redimensionar: ninguno; css que deshabilitará la propiedad extensible del área de texto.