Como posso evitar que a textarea se estenda além de seu elemento DIV pai? (apenas problema do google-chrome)

Como posso evitar que a textarea se estenda além de seu elemento DIV pai?

Eu tenho essa textarea dentro de uma tabela que está dentro de um DIV e parece que isso faz com que a tabela inteira se estique fora de seus limites.

Você pode ver um exemplo da mesma situação, mesmo em um caso mais simples, apenas colocando uma área de texto dentro de um div (como o que é usado aqui em www.stackoverflow.com)

Você pode ver nas imagens abaixo que a área de texto pode esticar além do tamanho de seu pai. Como faço para evitar isso?

Eu sou meio novo em CSS, então eu realmente não sei quais atributos CSS devo usar. Eu tentei vários como exibição e estouro . Mas eles não parecem fazer o truque. Mais alguma coisa que eu possa ter perdido?

ATUALIZAÇÃO: HTML

CSS

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

Se você colocar este código dentro do http://jsfiddle.net , verá que eles agem de forma diferente. Embora a área de texto seja limitada à porcentagem declarada em seu estilo css, ainda é possível fazer com que sua tabela pai seja tão grande quanto deseja e, então, você pode ver que ela ultrapassa sua borda pai. Alguma ideia de como consertar isso?

Para desativar o redimensionamento completamente:

textarea {
    resize: none;
}

Para permitir apenas redimensionamento vertical:

textarea {
    resize: vertical;
}

Para permitir apenas redimensionamento horizontal:

textarea {
    resize: horizontal;
}

Ou você pode limitar o tamanho:

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

Para limitar o tamanho à largura e / ou altura dos pais:

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

O controle de redimensionamento da área de texto está disponível por meio da propriedade redimensionar CSS3 :

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

Valores permitidos autoexplicativos: none(desativa o redimensionamento da área de texto) both, verticale horizontal.

Observe que no Chrome, Firefox e Safari o padrão é both.

Se você deseja restringir a largura e altura do elemento textarea, isso não é um problema: estes navegadores também respeitar max-height, max-width, min-height, e min-widthpropriedades CSS para fornecer redimensionamento dentro de determinadas proporções.

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

Eu estou esperando que você está tendo o mesmo problema que eu tive ... o meu problema era simples: Faça uma textarea fixo com percentagens trancado dentro do recipiente (eu sou novo CSS / JS / HTML, para ter comigo, se eu não entenda o jargão correto) para que, independentemente do dispositivo que está sendo exibido, a caixa que enche o recipiente (a célula da tabela) ocupe a quantidade correta de espaço. Veja como eu resolvi:

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

Então CSS se parece com isto ...

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

Desculpe pelo bloco de código desleixado aqui, mas eu tive que mostrar o que é importante e não sei como inserir código CSS entre aspas neste site. Em qualquer caso, para garantir que você entende do que estou falando, o CSS importante é menos recuado aqui ...

O que fiz (conforme mostrado aqui) foi ajustar as porcentagens de maneira muito específica até encontrar aquelas que funcionaram perfeitamente para caber na tela, independentemente da tela do dispositivo usada.

Concedido, acho que o "redimensionar: nenhum;" é um exagero, mas é melhor prevenir do que remediar e agora os consumidores não terão mais como redimensionar a caixa, nem importará de qual dispositivo estão visualizando.

Funciona muito bem.

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

atribua sua largura e altura necessárias para a área de texto e use. redimensionar: nenhum; propriedade css que desabilitará a propriedade stretchable do textarea.