Как я могу предотвратить выход textarea за пределы его родительского элемента DIV? (только проблема с google-chrome)

Как я могу предотвратить выход текстового поля за пределы родительского элемента DIV?

У меня есть это текстовое поле внутри таблицы, которая находится внутри DIV, и кажется, что она заставляет всю таблицу выходить за свои границы.

Вы можете увидеть пример той же ситуации даже в более простом случае, просто поместив текстовую область внутри div (например, то, что используется здесь в www.stackoverflow.com)

Из изображений ниже видно, что текстовое поле может выходить за пределы размера своего родительского? Как мне предотвратить это?

Я новичок в 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 , вы увидите, что они действуют по-другому. Хотя текстовое поле ограничено процентом, объявленным в его стиле 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 доступен через свойство resize CSS3 :

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

Допустимые значения говорят сами за себя: none(отключает изменение размера текстового поля) both, verticalи horizontal.

Обратите внимание, что в Chrome, 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 на этот сайт. В любом случае, чтобы вы понимали, о чем я говорю, важный CSS здесь имеет меньший отступ ...

То, что я затем сделал (как показано здесь), - это очень специфическая настройка процентов, пока я не нашел те, которые идеально подходят для отображения, независимо от того, какой экран устройства используется.

Конечно, я думаю, что «изменение размера: нет»; это излишне, но лучше перестраховаться, чем сожалеть, и теперь потребителям не придется изменять размер коробки, и не имеет значения, с какого устройства они ее просматривают.

Отлично работает.

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

назначьте требуемую ширину и высоту для текстового поля, а затем используйте. изменить размер: нет; css, которое отключит свойство растягиваемого текстового поля.