Come posso evitare che l'area di testo si estenda oltre il suo elemento DIV genitore? (solo problema con google-chrome)

Come posso evitare che la textarea si estenda oltre il suo elemento DIV genitore?

Ho questa textarea all'interno di una tabella che si trova all'interno di un DIV e sembra che faccia allungare l'intera tabella oltre i suoi limiti.

Puoi vedere un esempio della stessa situazione anche in un caso più semplice, semplicemente inserendo un'area di testo all'interno di un div (come quello che viene usato qui in www.stackoverflow.com)

Puoi vedere dalle immagini sottostanti che l'area di testo può estendersi oltre la dimensione del suo genitore? Come posso impedirlo?

Sono un po 'nuovo in CSS, quindi non so veramente quali attributi CSS dovrei usare. Ho provato diversi come display e overflow . Ma non sembrano fare il trucco. Qualcos'altro che potrei essermi perso?

AGGIORNAMENTO: HTML

CSS

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

Se metti questo codice all'interno di http://jsfiddle.net , vedrai che si comportano diversamente. Sebbene l'area di testo sia limitata alla percentuale dichiarata nel suo stile CSS, è ancora possibile far sì che la sua tabella genitore sia grande quanto vuole, e quindi puoi vedere che si riversa sul bordo padre. Qualche idea su come risolvere questo problema?

Per disabilitare completamente il ridimensionamento:

textarea {
    resize: none;
}

Per consentire solo il ridimensionamento verticale:

textarea {
    resize: vertical;
}

Per consentire solo il ridimensionamento orizzontale:

textarea {
    resize: horizontal;
}

Oppure puoi limitare le dimensioni:

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

Per limitare le dimensioni alla larghezza e / o all'altezza dei genitori:

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

Il controllo di ridimensionamento dell'area di testo è disponibile tramite la proprietà di ridimensionamento CSS3 :

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

I valori consentiti sono autoesplicativi: none(disabilita il ridimensionamento dell'area di testo) both, verticale horizontal.

Si noti che in Chrome, Firefox e Safari l'impostazione predefinita è both.

Se si desidera vincolare la larghezza e l'altezza dell'elemento textarea, che non è un problema: questi browser rispettano anche max-height, max-width, min-height, e min-widthproprietà CSS per fornire il ridimensionamento entro certe proporzioni.

Esempio di codice :

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

Spero che tu abbia lo stesso problema che ho avuto io ... il mio problema era semplice: crea un'area di testo fissa con percentuali bloccate all'interno del contenitore (sono nuovo in CSS / JS / HTML, quindi abbi pazienza, se lo faccio non ottenere il gergo corretto) in modo che, indipendentemente dal dispositivo su cui viene visualizzato, la scatola che riempie il contenitore (la cella della tabella) occupa la quantità corretta di spazio. Ecco come l'ho risolto:

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

Quindi CSS ha questo aspetto ...

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

Scusa per il blocco di codice sciatto qui, ma ho dovuto mostrarti cosa è importante e non so come inserire il codice CSS citato su questo sito web. In ogni caso, per assicurarti di vedere di cosa sto parlando, l'importante CSS è meno rientrato qui ...

Quello che ho fatto (come mostrato qui) è stato modificare in modo molto specifico le percentuali finché non ho trovato quelle che funzionavano perfettamente per adattarsi al display, indipendentemente dallo schermo del dispositivo utilizzato.

Certo, penso che il "ridimensionamento: nessuno;" è eccessivo, ma è meglio prevenire che curare e ora i consumatori non dovranno comunque ridimensionare la scatola, né importerà da quale dispositivo lo stanno visualizzando.

Funziona benissimo.

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

assegna la larghezza e l'altezza richieste per l'area di testo e quindi usa. ridimensiona: nessuno; css che disabiliterà la proprietà estensibile della textarea.