如何防止textarea超出其父DIV元素？(仅限google-chrome问题)

Question

如何防止textarea超出其父DIV元素？

我在一个DIV内部的表中有这个textarea,它似乎导致整个表伸出它的边界.

即使在更简单的情况下,您也可以看到相同情况的示例,只需将文本区域放在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样式中声明的百分比,但仍然可以使其使其父表格尽可能大,然后您可以看到它溢出其父边界.有关如何解决此问题的任何想法？

Answer 1

要完全禁用调整大小:

textarea {
    resize: none;
}

或者你可以限制大小:

textarea {
    resize: vertical;
}

要限制父母宽度和/或高度的大小:

textarea {
    resize: horizontal;
}

Answer 2

可以通过CSS3 resize属性获得Textarea resize控件:

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

允许值不言自明:( none禁用textarea大小调整)both,vertical和horizontal.

请注意,在Chrome,Firefox和Safari中默认为both.

如果要约束textarea元素的宽度和高度,这不是一个问题:这些浏览器也很尊重max-height,max-width,min-height,和min-widthCSS属性提供一定比例内调整.

代码示例:

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