textareaが親のDIV要素を超えて拡大しないようにするにはどうすればよいですか？（google-chromeの問題のみ）

textareaが親DIV要素を超えて拡大しないようにするにはどうすればよいですか？

このテキストエリアはDIV内のテーブル内にあり、テーブル全体が境界からはみ出しているようです。

もっと単純な場合でも、div内にテキスト領域を配置するだけで同じ状況の例を確認できます（www.stackoverflow.comで使用されているもののように）

下の画像から、textareaが親のサイズを超えて伸びていることがわかりますか？これを防ぐにはどうすればよいですか？

CSSは初めてなので、どのCSS属性を使用すればよいのか本当にわかりません。私はいくつかのような表示を試み、オーバーフローしました。しかし、彼らはトリックを行っていないようです。他に見逃したものはありますか？

更新：HTML

CSS

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

このコードをhttp://jsfiddle.net内に配置すると、動作が異なることがわかります。textareaはそのcssスタイルで宣言されたパーセンテージに制限されますが、それでも親テーブルを必要な大きさにすることが可能であり、親ボーダーを超えてはみ出すことがわかります。これを修正する方法について何か考えはありますか？

サイズ変更を完全に無効にするには：

textarea {
    resize: none;
}

垂直方向のサイズ変更のみを許可するには：

textarea {
    resize: vertical;
}

水平方向のサイズ変更のみを許可するには：

textarea {
    resize: horizontal;
}

または、サイズを制限することもできます。

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

サイズを親の幅や高さに制限するには：

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

Textareaのサイズ変更コントロールは、CSS3のresizeプロパティを介して使用できます。

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

許容値は自明：none（無効TEXTAREAリサイズ）both、verticalおよびhorizontal。

お知らせクロム、FirefoxとSafariでデフォルトがあることboth。

あなたはtextarea要素の幅と高さを制限したい場合、それは問題ではない：これらのブラウザでも尊重しmax-height、max-width、min-height、およびmin-width一定の割合以内にリサイズ提供するために、CSSのプロパティを。

コード例：

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

私が持っていたのと同じ問題が発生していることを願っています...私の問題は単純でした：コンテナー内にパーセンテージをロックして固定テキスト領域を作成します（CSS / JS / HTMLは初めてなので、専門用語を正しく理解しないでください）、表示されているデバイスに関係なく、コンテナを埋めるボックス（テーブルセル）が正しい量のスペースを占めるようにします。これが私がそれを解決した方法です：

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

次に、CSSは次のようになります...

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

ここのずさんなコードブロックで申し訳ありませんが、何が重要であるかを示す必要があり、引用符で囲まれたCSSコードをこのWebサイトに挿入する方法がわかりません。いずれにせよ、私が話していることを確実に理解するために、ここでは重要なCSSのインデントを減らしています...

次に、ここで示したように、どのデバイス画面を使用していても、ディスプレイに完全に機能するものが見つかるまで、具体的にパーセンテージを微調整しました。

もちろん、「サイズ変更：なし」と思います。やり過ぎですが、申し訳ありませんが安全です。消費者はボックスのサイズを変更する必要がなくなり、どのデバイスからボックスを表示するかは問題になりません。

それは素晴らしい働きをします。

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

textareaに必要な幅と高さを割り当てて使用します。 サイズ変更：なし; textareaの伸縮可能なプロパティを無効にするcssプロパティ。