Comment puis-je empêcher la zone de texte de s'étendre au-delà de son élément DIV parent? (problème google-chrome uniquement)

Comment puis-je empêcher la zone de texte de s'étirer au-delà de son élément DIV parent?

J'ai cette zone de texte à l'intérieur d'une table qui se trouve à l'intérieur d'un DIV et il semble que la table entière s'étire hors de ses limites.

Vous pouvez voir un exemple de la même situation même dans un cas plus simple, en mettant simplement une zone de texte à l'intérieur d'un div (comme ce qui est utilisé ici sur www.stackoverflow.com)

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

Je suis un peu nouveau dans CSS donc je ne sais pas vraiment quels attributs CSS dois-je utiliser. J'ai essayé plusieurs comme l' affichage et le débordement . Mais ils ne semblent pas faire l'affaire. Y a-t-il autre chose que j'aurais pu manquer?

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 dans http://jsfiddle.net , vous verrez qu'ils agissent différemment. Bien que la zone de texte soit limitée au pourcentage déclaré dans son style css, il est toujours possible de l'amener à faire en sorte que sa table parente soit aussi grande qu'elle le souhaite, puis vous pouvez voir qu'elle déborde sur sa bordure parente. Des idées sur la façon de résoudre ce problème?

Pour désactiver complètement le redimensionnement:

textarea {
    resize: none;
}

Pour autoriser uniquement le redimensionnement vertical:

textarea {
    resize: vertical;
}

Pour autoriser uniquement le redimensionnement horizontal:

textarea {
    resize: horizontal;
}

Ou vous pouvez limiter la taille:

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

Pour limiter la taille à la largeur et / ou à la hauteur des parents:

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

Le contrôle de redimensionnement Textarea est disponible via la propriété de redimensionnement CSS3 :

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

Valeurs autorisées explicites: none(désactive le redimensionnement de la zone de texte) both, verticalet horizontal.

Notez que dans Chrome, Firefox et Safari, la valeur par défaut est both.

Si vous voulez limiter la largeur et la hauteur de l'élément textarea, ce n'est pas un problème: ces navigateurs respectent également max-height, max-width, min-heightet min-widthpropriétés CSS pour fournir le redimensionnement dans certaines proportions.

Exemple de code :

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

J'espère que vous avez le même problème que j'avais ... ma question était simple: Faire un textarea fixe avec des pourcentages verrouillés à l' intérieur du conteneur (je suis nouveau à CSS / JS / HTML, donc garder avec moi, si je n'obtenez pas le jargon correct) de sorte que quel que soit l'appareil sur lequel il s'affiche, la boîte remplissant le conteneur (la cellule du tableau) occupe la bonne quantité d'espace. Voici comment je l'ai résolu:

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

Ensuite, CSS ressemble à ceci ...

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

Désolé pour le bloc de code bâclé ici, mais je devais vous montrer ce qui est important et je ne sais pas comment insérer du code CSS cité sur ce site. Dans tous les cas, pour vous assurer de bien voir de quoi je parle, le CSS important est moins en retrait ici ...

Ce que j'ai ensuite fait (comme indiqué ici), c'est de modifier très spécifiquement les pourcentages jusqu'à ce que je trouve ceux qui fonctionnaient parfaitement pour s'adapter à l'affichage, quel que soit l'écran de l'appareil utilisé.

Certes, je pense que le "redimensionner: aucun;" est exagéré, mais mieux vaut prévenir que guérir et maintenant, les consommateurs n'auront de toute façon pas à redimensionner la boîte, et peu importe le périphérique à partir duquel ils la visualisent.

Cela fonctionne très bien.

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

attribuez la largeur et la hauteur requises à la zone de texte, puis utilisez. redimensionner: aucun; css qui désactivera la propriété extensible de la zone de texte.